From e3b2496eaac2de4ce7dc8a05cff49c24a693b1cd Mon Sep 17 00:00:00 2001 From: bruno-sachin Date: Wed, 17 Jun 2026 13:41:17 +0530 Subject: [PATCH 01/24] COnflicts resolved --- .../Docs/CodeSnippets/CodeSnippets.tsx | 2 +- packages/oc-docs/src/components/Docs/Docs.tsx | 76 +++---------------- .../oc-docs/src/components/Docs/Item/Item.tsx | 2 +- .../components/Docs/Item/Scripts/Scripts.tsx | 2 +- packages/oc-docs/src/sampleCollection.ts | 72 ++++++++++++++++++ packages/oc-docs/src/styles/index.css | 75 +++++++++++++----- packages/oc-docs/src/ui/Code/Code.tsx | 62 --------------- packages/oc-docs/src/ui/Code/StyledWrapper.ts | 72 ------------------ packages/oc-docs/src/utils/common.ts | 35 +++++++++ packages/oc-docs/src/utils/itemUtils.ts | 2 +- packages/oc-docs/src/utils/items.ts | 2 +- 11 files changed, 179 insertions(+), 223 deletions(-) delete mode 100644 packages/oc-docs/src/ui/Code/Code.tsx delete mode 100644 packages/oc-docs/src/ui/Code/StyledWrapper.ts diff --git a/packages/oc-docs/src/components/Docs/CodeSnippets/CodeSnippets.tsx b/packages/oc-docs/src/components/Docs/CodeSnippets/CodeSnippets.tsx index 2cf350d9..fc893c33 100644 --- a/packages/oc-docs/src/components/Docs/CodeSnippets/CodeSnippets.tsx +++ b/packages/oc-docs/src/components/Docs/CodeSnippets/CodeSnippets.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { TabGroup } from '../../../ui/MinimalComponents'; -import { Code } from '../../../ui/Code/Code'; +import { Code } from '../../Code'; import { StyledWrapper } from './StyledWrapper'; import { generateCurlCommand, generateJavaScriptCode, generatePythonCode } from './generateCodeSnippets'; diff --git a/packages/oc-docs/src/components/Docs/Docs.tsx b/packages/oc-docs/src/components/Docs/Docs.tsx index 03a2146e..162d8575 100644 --- a/packages/oc-docs/src/components/Docs/Docs.tsx +++ b/packages/oc-docs/src/components/Docs/Docs.tsx @@ -1,15 +1,13 @@ import React, { useMemo, useEffect, useRef } from 'react'; import type { OpenCollection as OpenCollectionCollection } from '@opencollection/types'; -import type { StructuredText } from '@opencollection/types/common/description'; import Sidebar from './Sidebar/Sidebar'; import Item from './Item/Item'; -import FetchInBrunoButton from './Sidebar/FetchInBrunoButton'; +import Overview from '../../pages/Overview'; import { getItemId, generateSafeId } from '../../utils/itemUtils'; import { isFolder, getItemName } from '../../utils/schemaHelpers'; import { useAppSelector, useAppDispatch } from '../../store/hooks'; import { selectSelectedItemId, selectItem } from '../../store/slices/docs'; import { selectGitCollectionUrl } from '../../store/slices/app'; -import { useMarkdownRenderer } from '../../hooks'; interface DocsProps { docsCollection: OpenCollectionCollection | null; @@ -25,7 +23,6 @@ const Docs: React.FC = ({ const dispatch = useAppDispatch(); const selectedItemId = useAppSelector(selectSelectedItemId); const gitCollectionUrl = useAppSelector(selectGitCollectionUrl); - const md = useMarkdownRenderer(); const isInitialMount = useRef(true); // Scroll to selected item when it changes (but not on initial load) @@ -118,66 +115,13 @@ const Docs: React.FC = ({
-
- {docsCollection?.info?.name && ( -
-

- {docsCollection.info.name} -

- {gitCollectionUrl && ( - - - - )} -
- )} - - {/* Collection-level documentation/introduction */} - {docsCollection?.docs && ( -
-
-
- )} + {docsCollection && ( + + )} + {/*
*/} {/* Render all collection items */} - {allItems.map((item, index) => { + {/* {allItems.map((item, index) => { const itemId = getItemId(item); const itemUuid = (item as any).uuid || itemId; // Use UUID if available, fallback to itemId const safeId = generateSafeId(itemId); @@ -240,9 +184,9 @@ const Docs: React.FC = ({ />
); - })} + })} */} - {allItems.length === 0 && ( + {/* {allItems.length === 0 && (
@@ -252,8 +196,8 @@ const Docs: React.FC = ({

No endpoints or pages found in this collection.

- )} -
+ )} */} + {/*
*/}
); diff --git a/packages/oc-docs/src/components/Docs/Item/Item.tsx b/packages/oc-docs/src/components/Docs/Item/Item.tsx index 363ae0cc..8f4ed470 100644 --- a/packages/oc-docs/src/components/Docs/Item/Item.tsx +++ b/packages/oc-docs/src/components/Docs/Item/Item.tsx @@ -29,7 +29,7 @@ import { MinimalDataTable, StatusBadge } from '../../../ui/MinimalComponents'; -import { Code } from '../../../ui/Code/Code'; +import { Code } from '../../Code'; import { CodeSnippets } from '../CodeSnippets/CodeSnippets'; import { StyledWrapper } from './StyledWrapper'; import { Scripts } from './Scripts/Scripts'; diff --git a/packages/oc-docs/src/components/Docs/Item/Scripts/Scripts.tsx b/packages/oc-docs/src/components/Docs/Item/Scripts/Scripts.tsx index 0868ae0f..f238a35c 100644 --- a/packages/oc-docs/src/components/Docs/Item/Scripts/Scripts.tsx +++ b/packages/oc-docs/src/components/Docs/Item/Scripts/Scripts.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import { TabGroup } from '../../../../ui/MinimalComponents'; -import { Code } from '../../../../ui/Code/Code'; +import { Code } from '../../../Code'; import { StyledWrapper } from './StyledWrapper'; interface ScriptsProps { diff --git a/packages/oc-docs/src/sampleCollection.ts b/packages/oc-docs/src/sampleCollection.ts index 3c4f065c..d45d5c06 100644 --- a/packages/oc-docs/src/sampleCollection.ts +++ b/packages/oc-docs/src/sampleCollection.ts @@ -30,6 +30,28 @@ request: auth: type: "bearer" token: "{{bearer_auth_token}}" + scripts: + - type: before-request + code: |- + // used by \`scripting/js/folder-collection script-tests\` + const shouldTestCollectionScripts = bru.getVar('should-test-collection-scripts'); + if(shouldTestCollectionScripts) { + bru.setVar('collection-var-set-by-collection-script', 'collection-var-value-set-by-collection-script'); + } + - type: after-response + code: wefewfewfewfewfwefwefewfewfewfewfewfewfewfewf + - type: tests + code: |- + // used by \`scripting/js/folder-collection script-tests\` + const shouldTestCollectionScripts = bru.getVar('should-test-collection-scripts'); + const collectionVar = bru.getVar("collection-var-set-by-collection-script"); + if (shouldTestCollectionScripts && collectionVar) { + test("collection level test - should get the var that was set by the collection script", function() { + expect(collectionVar).to.equal("collection-var-value-set-by-collection-script"); + }); + bru.setVar('collection-var-set-by-collection-script', null); + bru.setVar('should-test-collection-scripts', null); + } docs: content: | This is a comprehensive API collection for testing **OpenCollection** features. @@ -619,4 +641,54 @@ items: "total": 1 } + - name: "Jokes" + type: "http" + seq: 11 + method: "GET" + url: "https://jsonplaceholder.typicode.com/posts/:postId" + params: + - name: "postId" + value: "1" + type: "path" + headers: + - name: "Accept" + value: "application/json" + docs: "Fetch a single post by its ID. The postId is supplied as a path parameter in the URL." + examples: + - name: "Single Post" + request: + params: + - name: "postId" + value: "1" + type: "path" + headers: + - name: "Accept" + value: "application/json" + response: + status: 200 + statusText: "OK" + headers: + - name: "Content-Type" + value: "application/json; charset=utf-8" + body: + type: "json" + data: | + { + "userId": 1, + "id": 1, + "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", + "body": "quia et suscipit suscipit recusandae consequuntur expedita et cum" + } + - name: "Not Found" + response: + status: 404 + statusText: "Not Found" + headers: + - name: "Content-Type" + value: "application/json; charset=utf-8" + body: + type: "json" + data: | + {} + `; diff --git a/packages/oc-docs/src/styles/index.css b/packages/oc-docs/src/styles/index.css index 6acc5263..102c1197 100644 --- a/packages/oc-docs/src/styles/index.css +++ b/packages/oc-docs/src/styles/index.css @@ -33,6 +33,7 @@ /* Border colors */ --border-color: var(--oc-border-border1); + --border-light: #EFEFEF; /* Code colors */ --code-bg: var(--oc-background-crust); /* approx: old #f6f8fa */ @@ -72,6 +73,23 @@ /* Fonts */ --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; + + /* Theme variables */ + --background-color: var(--background-light); + --text-primary: var(--text-light); + --text-secondary: #6b6b6b; + --text-tertiary: #838383; + --border-color: var(--border-light); + --code-bg: var(--code-bg-light); + --code-text: var(--code-text-light); + --prose-code-bg: #f5f5f5; + --prose-code-text: #d97706; + --table-header-bg: var(--table-header-bg-light); + --table-row-odd-bg: var(--table-row-odd-bg-light); + --table-row-even-bg: var(--table-row-even-bg-light); + --input-bg: var(--input-bg-light); + --badge-bg: var(--badge-bg-light); + --badge-text: var(--badge-text-light); } /* ================================================================ @@ -646,8 +664,13 @@ tr.themed-row:nth-child(even) { .markdown-documentation { color: var(--text-primary) !important; max-width: none !important; - line-height: 1.7 !important; - font-size: 0.9375rem !important; + /* Body text: Inter, Regular 400, 12px (0.75rem), 18px (1.125rem) line-height, 0 tracking. + Headings, code and strong text override this via their own rules below. */ + font-family: var(--font-sans) !important; + font-weight: 400 !important; + font-size: 0.75rem !important; + line-height: 1.125rem !important; + letter-spacing: normal !important; } .markdown-documentation h1, @@ -659,36 +682,32 @@ tr.themed-row:nth-child(even) { color: var(--text-primary) !important; margin-top: 1.5rem !important; margin-bottom: 0.625rem !important; + /* Shared heading typography: Inter, Semi Bold 600, 13px (0.8125rem), + 12px (0.75rem) line-height, 0 letter-spacing. */ + font-family: var(--font-sans) !important; font-weight: 600 !important; - letter-spacing: -0.02em !important; - line-height: 1.3 !important; + font-size: 0.8125rem !important; + line-height: 0.75rem !important; + letter-spacing: normal !important; } +/* Per-level rules only adjust spacing; every level shares the typography above. */ .markdown-documentation h1.heading-1 { - font-size: 1.5rem !important; - font-weight: 700 !important; margin-top: 0 !important; margin-bottom: 0.75rem !important; - letter-spacing: -0.025em !important; } .markdown-documentation h2.heading-2 { - font-size: 1.25rem !important; - font-weight: 600 !important; - margin-top: 1.5rem !important; + margin-top: 1rem !important; margin-bottom: 0.5rem !important; } .markdown-documentation h3.heading-3 { - font-size: 1.0625rem !important; - font-weight: 600 !important; margin-top: 1.25rem !important; margin-bottom: 0.5rem !important; } .markdown-documentation h4.heading-4 { - font-size: 0.9375rem !important; - font-weight: 600 !important; margin-top: 1rem !important; margin-bottom: 0.4rem !important; } @@ -742,13 +761,33 @@ tr.themed-row:nth-child(even) { border-radius: 8px !important; } -.markdown-documentation ul, .markdown-documentation ol { - margin-left: 1.25em !important; - margin-top: 0.5em !important; - margin-bottom: 0.75em !important; +.markdown-documentation ul, +.markdown-documentation ol { + /* Tailwind's preflight resets lists to `list-style: none` with zero padding, which + hides the markers. Restore the markers + the padding they need to render. */ + margin: 0.5em 0 0.75em !important; + padding-left: 1.5em !important; + list-style-position: outside !important; +} + +.markdown-documentation ul { + list-style-type: disc !important; +} + +.markdown-documentation ol { + list-style-type: decimal !important; +} + +/* Distinct markers for nested unordered lists (browser defaults, also reset by Tailwind). */ +.markdown-documentation ul ul { + list-style-type: circle !important; +} +.markdown-documentation ul ul ul { + list-style-type: square !important; } .markdown-documentation li { + display: list-item !important; margin-top: 0.2em !important; margin-bottom: 0.2em !important; } diff --git a/packages/oc-docs/src/ui/Code/Code.tsx b/packages/oc-docs/src/ui/Code/Code.tsx deleted file mode 100644 index 76550b2e..00000000 --- a/packages/oc-docs/src/ui/Code/Code.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import React, { useEffect, useRef, useState } from 'react'; -import { StyledWrapper } from './StyledWrapper'; - -import Prism from 'prismjs'; -import 'prismjs/components/prism-javascript'; -import 'prismjs/components/prism-bash'; -import 'prismjs/components/prism-python'; -import 'prismjs/components/prism-json'; -import 'prismjs/components/prism-xml-doc'; - -interface CodeProps { - code?: string; - language?: string; -} - -export const Code: React.FC = ({ - code, - language = 'text' -}) => { - const [copied, setCopied] = useState(false); - const codeRef = useRef(null); - - useEffect(() => { - if (codeRef.current) { - Prism.highlightAllUnder(codeRef.current); - } - }, [code, language]); - - const handleCopy = () => { - if (code) { - navigator.clipboard.writeText(code); - setCopied(true); - setTimeout(() => setCopied(false), 2000); - } - }; - - return ( - -
- -
- 
-            
-              {code || ''}
-            
-
-
-
- - ); -}; \ No newline at end of file diff --git a/packages/oc-docs/src/ui/Code/StyledWrapper.ts b/packages/oc-docs/src/ui/Code/StyledWrapper.ts deleted file mode 100644 index 3d08cd7c..00000000 --- a/packages/oc-docs/src/ui/Code/StyledWrapper.ts +++ /dev/null @@ -1,72 +0,0 @@ -import styled from '@emotion/styled'; - -export const StyledWrapper = styled.div` - background-color: var(--code-bg); - border: 1px solid var(--oc-border-border1); - border-radius: 8px; - - .code-copy-floating { - position: absolute; - top: 8px; - right: 8px; - z-index: 1; - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0.3rem; - border-radius: 4px; - border: none; - color: var(--oc-colors-text-muted); - background-color: var(--oc-background-surface0); - cursor: pointer; - opacity: 0; - transition: all 0.15s ease; - } - - &:hover .code-copy-floating { - opacity: 1; - } - - .code-copy-floating:hover { - color: var(--oc-text); - background-color: var(--oc-background-surface1); - } - - .code-content { - background-color: var(--code-bg); - color: var(--text-primary); - } - - .code-content::-webkit-scrollbar { - width: 6px; - height: 6px; - } - - .code-content::-webkit-scrollbar-track { - background: transparent; - } - - .code-content::-webkit-scrollbar-thumb { - background-color: color-mix(in srgb, var(--oc-text) 10%, transparent); - border-radius: 4px; - } - - .code-content:hover::-webkit-scrollbar-thumb { - background-color: color-mix(in srgb, var(--oc-text) 20%, transparent); - } - - .code-content::-webkit-scrollbar-thumb:hover { - background-color: color-mix(in srgb, var(--oc-text) 30%, transparent); - } - - .code-content pre { - font-size: 13px; - color: var(--text-primary); - line-height: 1.65; - } - - .code-content code { - color: var(--text-primary); - font-size: 13px; - } -`; \ No newline at end of file diff --git a/packages/oc-docs/src/utils/common.ts b/packages/oc-docs/src/utils/common.ts index 819f73ef..798fc7f8 100644 --- a/packages/oc-docs/src/utils/common.ts +++ b/packages/oc-docs/src/utils/common.ts @@ -8,3 +8,38 @@ export const uuid = () => { return customNanoId(); }; + +export const DEFAULT_COLLECTION_VERSION = 'v1.0.0'; + +/** + * Formats a raw collection version for consistent display across the UI. + * Numeric versions are padded to a full major.minor.patch and prefixed with "v" + * ("1" -> "v1.0.0", "2.1" -> "v2.1.0"); an existing "v"/"V" is preserved (no double "v"). + * Non-numeric / pre-release versions are shown as-is (only prefixed), and an unset + * version falls back to the default. + */ +export const formatCollectionVersion = (version?: string | number | null): string => { + if (version === null || version === undefined) return DEFAULT_COLLECTION_VERSION; + + const raw = String(version).trim(); + if (!raw) return DEFAULT_COLLECTION_VERSION; + + // Drop an existing leading "v"/"V" so we never end up with "vv...". + const core = raw.replace(/^v/i, '').trim(); + if (!core) return DEFAULT_COLLECTION_VERSION; + + const segments = core.split('.'); + const isNumeric = segments.every((segment) => /^\d+$/.test(segment)); + + // Only pad versions made up entirely of numeric segments; anything else + // (pre-release, build metadata, etc.) is shown as-is to stay precise. + if (!isNumeric) { + return `v${core}`; + } + + while (segments.length < 3) { + segments.push('0'); + } + + return `v${segments.join('.')}`; +}; diff --git a/packages/oc-docs/src/utils/itemUtils.ts b/packages/oc-docs/src/utils/itemUtils.ts index 9453f1ef..67656691 100644 --- a/packages/oc-docs/src/utils/itemUtils.ts +++ b/packages/oc-docs/src/utils/itemUtils.ts @@ -3,7 +3,7 @@ */ import type { Item as OpenCollectionItem } from '@opencollection/types/collection/item'; -import { getItemName, getItemType, isFolder } from './schemaHelpers'; +import { getItemName, isFolder } from './schemaHelpers'; /** * Generate a safe HTML ID from an item name or ID diff --git a/packages/oc-docs/src/utils/items.ts b/packages/oc-docs/src/utils/items.ts index a774e247..16e7a58c 100644 --- a/packages/oc-docs/src/utils/items.ts +++ b/packages/oc-docs/src/utils/items.ts @@ -1,6 +1,6 @@ import type { OpenCollection as OpenCollectionCollection } from '@opencollection/types'; import type { Item as OpenCollectionItem, Folder } from '@opencollection/types/collection/item'; -import { getItemType, isFolder } from './schemaHelpers'; +import { isFolder } from './schemaHelpers'; /** * Helper function to find and update an item by UUID From 085fba159ce419131e84544a3ac800784518254a Mon Sep 17 00:00:00 2001 From: bruno-sachin Date: Wed, 17 Jun 2026 16:17:21 +0530 Subject: [PATCH 02/24] BRU-2571 Overview revamp changes --- packages/oc-docs/e2e/collection-docs.spec.ts | 77 --------- .../overview/overview-documentation.spec.ts | 56 +++++++ .../oc-docs/e2e/overview/overview.spec.ts | 109 +++++++++++++ packages/oc-docs/e2e/utils/index.ts | 18 ++ packages/oc-docs/e2e/utils/locators.ts | 69 ++++++++ packages/oc-docs/src/assets/icons.tsx | 32 ++++ .../oc-docs/src/components/Code/Code.spec.tsx | 31 ++++ packages/oc-docs/src/components/Code/Code.tsx | 122 ++++++++++++++ .../src/components/Code/StyledWrapper.ts | 94 +++++++++++ packages/oc-docs/src/components/Code/index.ts | 2 + .../CollectionConfiguration.spec.tsx | 59 +++++++ .../CollectionConfiguration.tsx | 154 ++++++++++++++++++ .../CollectionConfiguration/StyledWrapper.ts | 87 ++++++++++ .../CollectionConfiguration/index.ts | 2 + .../CollectionStats/CollectionStats.spec.tsx | 24 +++ .../CollectionStats/CollectionStats.tsx | 22 +++ .../CollectionStats/StyledWrapper.ts | 13 ++ .../src/components/CollectionStats/index.ts | 3 + .../components/CopyButton/CopyButton.spec.tsx | 18 ++ .../src/components/CopyButton/CopyButton.tsx | 76 +++++++++ .../components/CopyButton/StyledWrapper.ts | 28 ++++ .../src/components/CopyButton/index.ts | 2 + .../components/EmptyState/EmptyState.spec.tsx | 28 ++++ .../src/components/EmptyState/EmptyState.tsx | 29 ++++ .../components/EmptyState/StyledWrapper.ts | 49 ++++++ .../src/components/EmptyState/index.ts | 2 + .../EnvironmentSummary.spec.tsx | 21 +++ .../EnvironmentSummary/EnvironmentSummary.tsx | 25 +++ .../EnvironmentSummary/StyledWrapper.ts | 9 + .../components/EnvironmentSummary/index.ts | 2 + .../EnvironmentSummaryItem.spec.tsx | 23 +++ .../EnvironmentSummaryItem.tsx | 25 +++ .../EnvironmentSummaryItem/StyledWrapper.ts | 38 +++++ .../EnvironmentSummaryItem/index.ts | 2 + .../src/components/Heading/Heading.spec.tsx | 18 ++ .../src/components/Heading/Heading.tsx | 24 +++ .../src/components/Heading/StyledWrapper.ts | 16 ++ .../oc-docs/src/components/Heading/index.ts | 2 + .../PageWrapper/PageWrapper.spec.tsx | 15 ++ .../components/PageWrapper/PageWrapper.tsx | 21 +++ .../components/PageWrapper/StyledWrapper.ts | 9 + .../src/components/PageWrapper/index.ts | 2 + .../SecretValue/SecretValue.spec.tsx | 12 ++ .../components/SecretValue/SecretValue.tsx | 52 ++++++ .../components/SecretValue/StyledWrapper.ts | 28 ++++ .../src/components/SecretValue/index.ts | 2 + .../src/components/Section/Section.spec.tsx | 16 ++ .../src/components/Section/Section.tsx | 24 +++ .../src/components/Section/StyledWrapper.ts | 11 ++ .../oc-docs/src/components/Section/index.ts | 2 + .../SectionLabel/SectionLabel.spec.tsx | 18 ++ .../components/SectionLabel/SectionLabel.tsx | 24 +++ .../components/SectionLabel/StyledWrapper.ts | 17 ++ .../src/components/SectionLabel/index.ts | 2 + .../oc-docs/src/components/Stat/Stat.spec.tsx | 12 ++ packages/oc-docs/src/components/Stat/Stat.tsx | 17 ++ .../src/components/Stat/StyledWrapper.ts | 25 +++ packages/oc-docs/src/components/Stat/index.ts | 3 + .../components/SubHeading/StyledWrapper.ts | 16 ++ .../components/SubHeading/SubHeading.spec.tsx | 18 ++ .../src/components/SubHeading/SubHeading.tsx | 24 +++ .../src/components/SubHeading/index.ts | 2 + packages/oc-docs/src/constants/constants.ts | 14 ++ packages/oc-docs/src/constants/index.ts | 1 + .../src/pages/Overview/Overview.spec.tsx | 39 +++++ .../oc-docs/src/pages/Overview/Overview.tsx | 132 +++++++++++++++ .../src/pages/Overview/StyledWrapper.ts | 52 ++++++ packages/oc-docs/src/pages/Overview/index.ts | 2 + packages/oc-docs/src/styles/index.css | 18 -- .../src/utils/collectionConfiguration.spec.ts | 28 ++++ .../src/utils/collectionConfiguration.ts | 23 +++ .../oc-docs/src/utils/collectionStats.spec.ts | 52 ++++++ packages/oc-docs/src/utils/collectionStats.ts | 45 +++++ packages/oc-docs/src/utils/common.spec.ts | 35 ++++ 74 files changed, 2129 insertions(+), 95 deletions(-) delete mode 100644 packages/oc-docs/e2e/collection-docs.spec.ts create mode 100644 packages/oc-docs/e2e/overview/overview-documentation.spec.ts create mode 100644 packages/oc-docs/e2e/overview/overview.spec.ts create mode 100644 packages/oc-docs/e2e/utils/index.ts create mode 100644 packages/oc-docs/e2e/utils/locators.ts create mode 100644 packages/oc-docs/src/assets/icons.tsx create mode 100644 packages/oc-docs/src/components/Code/Code.spec.tsx create mode 100644 packages/oc-docs/src/components/Code/Code.tsx create mode 100644 packages/oc-docs/src/components/Code/StyledWrapper.ts create mode 100644 packages/oc-docs/src/components/Code/index.ts create mode 100644 packages/oc-docs/src/components/CollectionConfiguration/CollectionConfiguration.spec.tsx create mode 100644 packages/oc-docs/src/components/CollectionConfiguration/CollectionConfiguration.tsx create mode 100644 packages/oc-docs/src/components/CollectionConfiguration/StyledWrapper.ts create mode 100644 packages/oc-docs/src/components/CollectionConfiguration/index.ts create mode 100644 packages/oc-docs/src/components/CollectionStats/CollectionStats.spec.tsx create mode 100644 packages/oc-docs/src/components/CollectionStats/CollectionStats.tsx create mode 100644 packages/oc-docs/src/components/CollectionStats/StyledWrapper.ts create mode 100644 packages/oc-docs/src/components/CollectionStats/index.ts create mode 100644 packages/oc-docs/src/components/CopyButton/CopyButton.spec.tsx create mode 100644 packages/oc-docs/src/components/CopyButton/CopyButton.tsx create mode 100644 packages/oc-docs/src/components/CopyButton/StyledWrapper.ts create mode 100644 packages/oc-docs/src/components/CopyButton/index.ts create mode 100644 packages/oc-docs/src/components/EmptyState/EmptyState.spec.tsx create mode 100644 packages/oc-docs/src/components/EmptyState/EmptyState.tsx create mode 100644 packages/oc-docs/src/components/EmptyState/StyledWrapper.ts create mode 100644 packages/oc-docs/src/components/EmptyState/index.ts create mode 100644 packages/oc-docs/src/components/EnvironmentSummary/EnvironmentSummary.spec.tsx create mode 100644 packages/oc-docs/src/components/EnvironmentSummary/EnvironmentSummary.tsx create mode 100644 packages/oc-docs/src/components/EnvironmentSummary/StyledWrapper.ts create mode 100644 packages/oc-docs/src/components/EnvironmentSummary/index.ts create mode 100644 packages/oc-docs/src/components/EnvironmentSummaryItem/EnvironmentSummaryItem.spec.tsx create mode 100644 packages/oc-docs/src/components/EnvironmentSummaryItem/EnvironmentSummaryItem.tsx create mode 100644 packages/oc-docs/src/components/EnvironmentSummaryItem/StyledWrapper.ts create mode 100644 packages/oc-docs/src/components/EnvironmentSummaryItem/index.ts create mode 100644 packages/oc-docs/src/components/Heading/Heading.spec.tsx create mode 100644 packages/oc-docs/src/components/Heading/Heading.tsx create mode 100644 packages/oc-docs/src/components/Heading/StyledWrapper.ts create mode 100644 packages/oc-docs/src/components/Heading/index.ts create mode 100644 packages/oc-docs/src/components/PageWrapper/PageWrapper.spec.tsx create mode 100644 packages/oc-docs/src/components/PageWrapper/PageWrapper.tsx create mode 100644 packages/oc-docs/src/components/PageWrapper/StyledWrapper.ts create mode 100644 packages/oc-docs/src/components/PageWrapper/index.ts create mode 100644 packages/oc-docs/src/components/SecretValue/SecretValue.spec.tsx create mode 100644 packages/oc-docs/src/components/SecretValue/SecretValue.tsx create mode 100644 packages/oc-docs/src/components/SecretValue/StyledWrapper.ts create mode 100644 packages/oc-docs/src/components/SecretValue/index.ts create mode 100644 packages/oc-docs/src/components/Section/Section.spec.tsx create mode 100644 packages/oc-docs/src/components/Section/Section.tsx create mode 100644 packages/oc-docs/src/components/Section/StyledWrapper.ts create mode 100644 packages/oc-docs/src/components/Section/index.ts create mode 100644 packages/oc-docs/src/components/SectionLabel/SectionLabel.spec.tsx create mode 100644 packages/oc-docs/src/components/SectionLabel/SectionLabel.tsx create mode 100644 packages/oc-docs/src/components/SectionLabel/StyledWrapper.ts create mode 100644 packages/oc-docs/src/components/SectionLabel/index.ts create mode 100644 packages/oc-docs/src/components/Stat/Stat.spec.tsx create mode 100644 packages/oc-docs/src/components/Stat/Stat.tsx create mode 100644 packages/oc-docs/src/components/Stat/StyledWrapper.ts create mode 100644 packages/oc-docs/src/components/Stat/index.ts create mode 100644 packages/oc-docs/src/components/SubHeading/StyledWrapper.ts create mode 100644 packages/oc-docs/src/components/SubHeading/SubHeading.spec.tsx create mode 100644 packages/oc-docs/src/components/SubHeading/SubHeading.tsx create mode 100644 packages/oc-docs/src/components/SubHeading/index.ts create mode 100644 packages/oc-docs/src/constants/constants.ts create mode 100644 packages/oc-docs/src/constants/index.ts create mode 100644 packages/oc-docs/src/pages/Overview/Overview.spec.tsx create mode 100644 packages/oc-docs/src/pages/Overview/Overview.tsx create mode 100644 packages/oc-docs/src/pages/Overview/StyledWrapper.ts create mode 100644 packages/oc-docs/src/pages/Overview/index.ts create mode 100644 packages/oc-docs/src/utils/collectionConfiguration.spec.ts create mode 100644 packages/oc-docs/src/utils/collectionConfiguration.ts create mode 100644 packages/oc-docs/src/utils/collectionStats.spec.ts create mode 100644 packages/oc-docs/src/utils/collectionStats.ts create mode 100644 packages/oc-docs/src/utils/common.spec.ts diff --git a/packages/oc-docs/e2e/collection-docs.spec.ts b/packages/oc-docs/e2e/collection-docs.spec.ts deleted file mode 100644 index 2dbabc18..00000000 --- a/packages/oc-docs/e2e/collection-docs.spec.ts +++ /dev/null @@ -1,77 +0,0 @@ -import { test, expect } from '@playwright/test'; - -test.describe('Collection-level documentation', () => { - test.beforeEach(async ({ page }) => { - await page.goto('/'); - await page.waitForSelector('.collection-docs'); - }); - - test('renders at the top of the docs page', async ({ page }) => { - const collectionDocs = page.locator('.collection-docs'); - await expect(collectionDocs).toBeVisible(); - - // Should appear before any endpoint sections - const firstEndpoint = page.locator('.endpoint-section').first(); - const docsBox = await collectionDocs.boundingBox(); - const endpointBox = await firstEndpoint.boundingBox(); - expect(docsBox!.y).toBeLessThan(endpointBox!.y); - }); - - test('renders markdown headings', async ({ page }) => { - const docs = page.locator('.collection-docs'); - await expect(docs.getByRole('heading', { name: 'Getting Started', level: 2 })).toBeVisible(); - await expect(docs.getByRole('heading', { name: 'Authentication', level: 2 })).toBeVisible(); - await expect(docs.getByRole('heading', { name: 'Rate Limits', level: 2 })).toBeVisible(); - }); - - test('renders collection name as page header above docs', async ({ page }) => { - const heading = page - .locator('.playground-content') - .getByRole('heading', { name: 'Bruno Testbench', level: 1 }); - await expect(heading).toBeVisible(); - - const headingBox = await heading.boundingBox(); - const docsBox = await page.locator('.collection-docs').boundingBox(); - expect(headingBox!.y).toBeLessThan(docsBox!.y); - }); - - test('renders markdown paragraphs with inline formatting', async ({ page }) => { - const docs = page.locator('.collection-docs'); - await expect(docs.getByText('comprehensive API collection for testing')).toBeVisible(); - // Bold text - await expect(docs.locator('strong', { hasText: 'OpenCollection' })).toBeVisible(); - }); - - test('renders ordered list', async ({ page }) => { - const docs = page.locator('.collection-docs'); - await expect(docs.getByText('Select an environment')).toBeVisible(); - await expect(docs.getByText('Try out the various API endpoints')).toBeVisible(); - await expect(docs.getByText('Check the response examples')).toBeVisible(); - }); - - test('renders markdown table', async ({ page }) => { - const docs = page.locator('.collection-docs'); - const table = docs.locator('table'); - await expect(table).toBeVisible(); - // Table headers - await expect(table.getByRole('columnheader', { name: 'Environment' })).toBeVisible(); - await expect(table.getByRole('columnheader', { name: 'Base URL' })).toBeVisible(); - await expect(table.getByRole('columnheader', { name: 'Auth' })).toBeVisible(); - // Table data - await expect(table.getByRole('cell', { name: 'Local', exact: true })).toBeVisible(); - await expect(table.getByRole('cell', { name: 'Prod', exact: true })).toBeVisible(); - }); - - test('renders code blocks', async ({ page }) => { - const docs = page.locator('.collection-docs'); - await expect(docs.locator('code', { hasText: 'curl -H' })).toBeVisible(); - }); - - test('renders blockquote', async ({ page }) => { - const docs = page.locator('.collection-docs'); - const blockquote = docs.locator('blockquote'); - await expect(blockquote).toBeVisible(); - await expect(blockquote.getByText('Note')).toBeVisible(); - await expect(blockquote.locator('code', { hasText: 'X-RateLimit-Remaining' })).toBeVisible(); - }); -}); diff --git a/packages/oc-docs/e2e/overview/overview-documentation.spec.ts b/packages/oc-docs/e2e/overview/overview-documentation.spec.ts new file mode 100644 index 00000000..90bf7281 --- /dev/null +++ b/packages/oc-docs/e2e/overview/overview-documentation.spec.ts @@ -0,0 +1,56 @@ +import { test, expect, buildOverviewLocators, gotoOverview } from '../utils'; + +/** + * Markdown rendering inside the Overview's documentation section. The sample + * collection's `docs` exercises headings, inline formatting, lists, a table, + * a code block and a blockquote. + */ +test.describe('Overview documentation (markdown)', () => { + test.beforeEach(async ({ page }) => { + await gotoOverview(page); + }); + + test('renders markdown headings', async ({ page }) => { + const { docs } = buildOverviewLocators(page); + await expect(docs.heading('Getting Started')).toBeVisible(); + await expect(docs.heading('Authentication')).toBeVisible(); + await expect(docs.heading('Rate Limits')).toBeVisible(); + }); + + test('renders paragraphs with inline formatting', async ({ page }) => { + const { docs } = buildOverviewLocators(page); + await expect(docs.content().getByText('comprehensive API collection for testing')).toBeVisible(); + await expect(docs.content().locator('strong', { hasText: 'OpenCollection' })).toBeVisible(); + }); + + test('renders an ordered list', async ({ page }) => { + const { docs } = buildOverviewLocators(page); + await expect(docs.content().getByText('Select an environment')).toBeVisible(); + await expect(docs.content().getByText('Try out the various API endpoints')).toBeVisible(); + await expect(docs.content().getByText('Check the response examples')).toBeVisible(); + }); + + test('renders a markdown table', async ({ page }) => { + const { docs } = buildOverviewLocators(page); + const table = docs.table(); + await expect(table).toBeVisible(); + await expect(table.getByRole('columnheader', { name: 'Environment' })).toBeVisible(); + await expect(table.getByRole('columnheader', { name: 'Base URL' })).toBeVisible(); + await expect(table.getByRole('columnheader', { name: 'Auth' })).toBeVisible(); + await expect(table.getByRole('cell', { name: 'Local', exact: true })).toBeVisible(); + await expect(table.getByRole('cell', { name: 'Prod', exact: true })).toBeVisible(); + }); + + test('renders a code block', async ({ page }) => { + const { docs } = buildOverviewLocators(page); + await expect(docs.content().locator('code', { hasText: 'curl -H' })).toBeVisible(); + }); + + test('renders a blockquote', async ({ page }) => { + const { docs } = buildOverviewLocators(page); + const blockquote = docs.content().locator('blockquote'); + await expect(blockquote).toBeVisible(); + await expect(blockquote.getByText('Note')).toBeVisible(); + await expect(blockquote.locator('code', { hasText: 'X-RateLimit-Remaining' })).toBeVisible(); + }); +}); diff --git a/packages/oc-docs/e2e/overview/overview.spec.ts b/packages/oc-docs/e2e/overview/overview.spec.ts new file mode 100644 index 00000000..16169d28 --- /dev/null +++ b/packages/oc-docs/e2e/overview/overview.spec.ts @@ -0,0 +1,109 @@ +import { test, expect, buildOverviewLocators, gotoOverview } from '../utils'; + +/** + * Overview flow for the bundled sample collection ("Bruno Testbench"): + * version + name header, stat counters, environments list, and the + * collection configuration (headers, auth, scripts, tests). + */ +test.describe('Collection Overview', () => { + test.beforeEach(async ({ page }) => { + await gotoOverview(page); + }); + + test('renders the version and collection name in the header', async ({ page }) => { + const overview = buildOverviewLocators(page); + + await test.step('shows the v-prefixed collection version', async () => { + await expect(overview.header.version()).toHaveText('v1.0.0'); + }); + + await test.step('shows the collection name as the page title', async () => { + await expect(overview.header.title()).toHaveText('Bruno Testbench'); + }); + }); + + test('shows request, folder and environment counts', async ({ page }) => { + const overview = buildOverviewLocators(page); + + await expect(overview.stats.all()).toHaveCount(3); + await expect(overview.stats.value('Requests')).toHaveText('10'); + await expect(overview.stats.value('Folders')).toHaveText('0'); + await expect(overview.stats.value('Environments')).toHaveText('2'); + }); + + test('lists each environment with its variable count', async ({ page }) => { + const overview = buildOverviewLocators(page); + + await test.step('shows the Environments section', async () => { + await expect(overview.sectionLabel('Environments')).toBeVisible(); + }); + + await test.step('lists Local and Prod', async () => { + await expect(overview.environments.items()).toHaveCount(2); + await expect(overview.environments.item('Local')).toBeVisible(); + await expect(overview.environments.item('Prod')).toBeVisible(); + }); + + await test.step('shows each environment variable count', async () => { + await expect(overview.environments.variableCount('Local')).toHaveText('2 variables'); + await expect(overview.environments.variableCount('Prod')).toHaveText('2 variables'); + }); + }); + + test('renders the overview documentation section', async ({ page }) => { + const overview = buildOverviewLocators(page); + + await expect(overview.sectionLabel('Overview')).toBeVisible(); + await expect(overview.docs.content()).toBeVisible(); + await expect(overview.docs.heading('Getting Started')).toBeVisible(); + }); + + test.describe('Collection Configuration', () => { + test('renders the headers, auth, script and tests groups', async ({ page }) => { + const overview = buildOverviewLocators(page); + + await expect(overview.sectionLabel('Collection Configuration')).toBeVisible(); + + await test.step('Headers group shows the collection header', async () => { + await expect(overview.configuration.subHeading('Headers')).toBeVisible(); + await expect(overview.configuration.rowValue('collection-header')).toHaveText('collection-header-value'); + }); + + await test.step('Auth group shows the resolved auth mode', async () => { + await expect(overview.configuration.subHeading('Auth')).toBeVisible(); + await expect(overview.configuration.rowValue('Mode')).toHaveText('Bearer Token'); + }); + + await test.step('Script and Tests groups are present', async () => { + await expect(overview.configuration.subHeading('Script')).toBeVisible(); + await expect(overview.configuration.subHeading('Tests')).toBeVisible(); + }); + }); + + test('masks the auth token until the reveal toggle is clicked', async ({ page }) => { + const overview = buildOverviewLocators(page); + const secret = overview.configuration.secret(); + + await test.step('the token is masked by default', async () => { + await expect(secret).toContainText('•'); + await expect(secret).not.toHaveText('{{bearer_auth_token}}'); + }); + + await test.step('clicking the toggle reveals the raw token', async () => { + await overview.configuration.revealSecretButton().click(); + await expect(secret).toHaveText('{{bearer_auth_token}}'); + }); + }); + + test('copies a code snippet to the clipboard', async ({ page, context }) => { + await context.grantPermissions(['clipboard-read', 'clipboard-write']); + const overview = buildOverviewLocators(page); + const copyButton = overview.configuration.copyButtons().first(); + + await test.step('clicking copy confirms with the "Copied" label', async () => { + await copyButton.click(); + await expect(copyButton).toHaveAttribute('aria-label', 'Copied'); + }); + }); + }); +}); diff --git a/packages/oc-docs/e2e/utils/index.ts b/packages/oc-docs/e2e/utils/index.ts new file mode 100644 index 00000000..c609b99c --- /dev/null +++ b/packages/oc-docs/e2e/utils/index.ts @@ -0,0 +1,18 @@ +import { test, expect } from '@playwright/test'; +import type { Page } from '@playwright/test'; + +// Single import point for specs (mirrors how the bruno tests import `test`, +// `expect` and helpers from one place). +export { test, expect }; +export * from './locators'; + +/** + * Navigate to the docs app and wait for the Overview to finish rendering. + * The dev server renders the bundled sample collection at `/`. + */ +export const gotoOverview = async (page: Page): Promise => { + await test.step('Open the docs and wait for the Overview to render', async () => { + await page.goto('/'); + await page.locator('.oc-overview').waitFor({ state: 'visible' }); + }); +}; diff --git a/packages/oc-docs/e2e/utils/locators.ts b/packages/oc-docs/e2e/utils/locators.ts new file mode 100644 index 00000000..7bb17588 --- /dev/null +++ b/packages/oc-docs/e2e/utils/locators.ts @@ -0,0 +1,69 @@ +import type { Page } from '@playwright/test'; + +/** + * Locators for the collection Overview page, grouped by UI area. + * + * Mirrors the `buildCommonLocators` pattern from the bruno tests: a single + * builder returns thunks organised by section, so specs read declaratively and + * every selector lives in one place. Prefers semantic role/text queries and + * falls back to the components' own stable class hooks. + */ +export const buildOverviewLocators = (page: Page) => { + const root = () => page.locator('.oc-overview'); + const stat = (label: string) => root().locator('.collection-stats .stat').filter({ hasText: label }); + const environment = (name: string) => root().locator('.environment-summary-item').filter({ hasText: name }); + const configuration = () => root().locator('.collection-configuration'); + + return { + /** The Overview page root. */ + root, + + /** Headline: version label + collection name. */ + header: { + version: () => root().locator('.overview-version'), + title: () => root().locator('.overview-headline').getByRole('heading', { level: 1 }) + }, + + /** Stat counters (Requests / Folders / Environments). */ + stats: { + all: () => root().locator('.collection-stats .stat'), + item: stat, + value: (label: string) => stat(label).locator('.stat-value') + }, + + /** An uppercase section heading (e.g. "Environments", "Collection Configuration"). */ + sectionLabel: (name: string) => root().getByRole('heading', { level: 2, name }), + + /** Environments list. */ + environments: { + list: () => root().locator('.environment-summary'), + items: () => root().locator('.environment-summary-item'), + item: environment, + variableCount: (name: string) => environment(name).locator('.environment-summary-vars') + }, + + /** Rendered markdown documentation. */ + docs: { + content: () => root().locator('.overview-markdown'), + heading: (name: string) => root().locator('.overview-markdown').getByRole('heading', { name }), + table: () => root().locator('.overview-markdown table') + }, + + /** Collection configuration: headers, auth, scripts and tests. */ + configuration: { + root: configuration, + subHeading: (name: string) => configuration().getByRole('heading', { level: 3, name, exact: true }), + row: (key: string) => configuration().locator('.config-row').filter({ hasText: key }), + rowValue: (key: string) => configuration().locator('.config-row').filter({ hasText: key }).locator('.config-value-cell'), + emptyMessages: () => configuration().locator('.config-empty-message'), + copyButtons: () => configuration().locator('.copy-button'), + secret: () => configuration().locator('.secret-value-text'), + revealSecretButton: () => configuration().locator('.secret-value-toggle') + }, + + /** Dashed empty-state placeholders (shown when a whole section has no data). */ + emptyState: { + headings: () => root().locator('.empty-state-heading') + } + }; +}; diff --git a/packages/oc-docs/src/assets/icons.tsx b/packages/oc-docs/src/assets/icons.tsx new file mode 100644 index 00000000..e16bc72c --- /dev/null +++ b/packages/oc-docs/src/assets/icons.tsx @@ -0,0 +1,32 @@ +import React from 'react'; + +/** Shared stroke styling for the empty-state icons. `currentColor` lets the icon + * inherit the surrounding theme colour, so it adapts when the theme changes. */ +const baseIconProps: React.SVGProps = { + width: 20, + height: 20, + viewBox: '0 0 24 24', + fill: 'none', + stroke: 'currentColor', + strokeWidth: 2, + strokeLinecap: 'round', + strokeLinejoin: 'round', + 'aria-hidden': true +}; + +/** Globe — empty Environments. */ +export const GlobeIcon: React.FC = () => ( + + + + + +); + +/** Book — empty Overview (readme) and empty Collection Configuration. */ +export const BookIcon: React.FC = () => ( + + + + +); diff --git a/packages/oc-docs/src/components/Code/Code.spec.tsx b/packages/oc-docs/src/components/Code/Code.spec.tsx new file mode 100644 index 00000000..82b4890d --- /dev/null +++ b/packages/oc-docs/src/components/Code/Code.spec.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { renderToStaticMarkup } from 'react-dom/server'; +import { describe, it, expect } from 'vitest'; +import { Code } from './Code'; + +describe('Code (read-only viewer)', () => { + it('renders the code content', () => { + const html = renderToStaticMarkup(); + expect(html).toContain('const a = 1;'); + }); + + it('renders one line number per line when showLineNumbers is set', () => { + const html = renderToStaticMarkup(); + expect(html).toContain('1'); + expect(html).toContain('2'); + expect(html).toContain('3'); + expect(html).not.toContain('4'); + }); + + it('omits the line-number gutter by default', () => { + const html = renderToStaticMarkup(); + // With no gutter, the line-number spans (1, …) are not rendered. + expect(html).not.toContain('1'); + expect(html).not.toContain('2'); + }); + + it('shows a copy button by default and hides it when showCopy is false', () => { + expect(renderToStaticMarkup()).toContain(')).not.toContain(' import('../../ui/CodeEditor/CodeEditor')); + +interface CodeProps { + /** Source to display (read-only) or edit. */ + code?: string; + /** Language id for highlighting (e.g. "javascript", "json", "bash"). */ + language?: string; + /** Read-only viewer (default) or an editable editor. */ + readOnly?: boolean; + /** Called with the new value in editable mode. */ + onChange?: (value: string) => void; + /** Show a line-number gutter (read-only viewer). */ + showLineNumbers?: boolean; + /** Show the copy-to-clipboard button (read-only viewer). */ + showCopy?: boolean; + /** Editor height in editable mode. */ + height?: string; + className?: string; +} + +type CodeViewerProps = Pick; + +/** + * Read-only, Prism-highlighted code. Lightweight and SSR-safe (highlighting runs + * on the client; the raw code and line numbers render server-side). Optionally + * shows a line-number gutter and a copy-to-clipboard button. + */ +const CodeViewer: React.FC = ({ + code = '', + language = 'text', + showLineNumbers = false, + showCopy = true, + className +}) => { + const preRef = useRef(null); + + useEffect(() => { + if (preRef.current) { + Prism.highlightAllUnder(preRef.current); + } + }, [code, language]); + + const lineCount = useMemo(() => (code ? code.split('\n').length : 1), [code]); + + const wrapperClassName = ['code-content-wrapper overflow-hidden', className].filter(Boolean).join(' '); + const codeEl = ( + 
+      {code}
+
+ ); + + return ( + +
+ {showCopy && } + + {showLineNumbers ? ( +
+ +
{codeEl}
+
+ ) : ( +
{codeEl}
+ )} +
+ + ); +}; + +/** + * Code surface used across the docs. Read-only by default (lightweight, + * Prism-highlighted, SSR-safe); pass `readOnly={false}` with `onChange` to get a + * full editor instead. The editor is loaded on demand, so read-only usage stays + * cheap. Reuse anywhere a code block (viewer or editor) is needed. + */ +export const Code: React.FC = ({ + code = '', + language = 'text', + readOnly = true, + onChange, + showLineNumbers = false, + showCopy = true, + height = '200px', + className +}) => { + if (!readOnly) { + return ( + }> + {})} language={language} height={height} /> + + ); + } + + return ( + + ); +}; + +export default Code; diff --git a/packages/oc-docs/src/components/Code/StyledWrapper.ts b/packages/oc-docs/src/components/Code/StyledWrapper.ts new file mode 100644 index 00000000..891c17fa --- /dev/null +++ b/packages/oc-docs/src/components/Code/StyledWrapper.ts @@ -0,0 +1,94 @@ +import styled from '@emotion/styled'; + +export const StyledWrapper = styled.div` + background-color: var(--code-bg); + border: 1px solid #ebeef1; + border-radius: 8px; + + /* The copy button owns its own look (see CopyButton); here we only place it + and reveal it on hover/keyboard focus. */ + .code-copy-floating { + position: absolute; + top: 8px; + right: 8px; + z-index: 1; + opacity: 0; + transition: opacity 0.15s ease; + } + &:hover .code-copy-floating, + .code-copy-floating:focus-visible { + opacity: 1; + } + + .code-content { + background-color: var(--code-bg); + color: var(--text-primary); + } + + .code-content::-webkit-scrollbar { + width: 6px; + height: 6px; + } + .code-content::-webkit-scrollbar-track { + background: transparent; + } + .code-content::-webkit-scrollbar-thumb { + background-color: rgba(0, 0, 0, 0.1); + border-radius: 4px; + } + .code-content:hover::-webkit-scrollbar-thumb { + background-color: rgba(0, 0, 0, 0.2); + } + .code-content::-webkit-scrollbar-thumb:hover { + background-color: rgba(0, 0, 0, 0.3); + } + + .code-content pre { + font-size: 13px; + color: var(--text-primary); + line-height: 1.65; + } + .code-content code { + color: var(--text-primary); + font-size: 13px; + } + + /* Line-numbered variant (collection-config code snippets): a light background + with Fira Code 12px text. The gutter shares the exact same font metrics + + top padding as the code so the numbers line up with their rows; only the + code scrolls horizontally. */ + .code-content-numbered { + display: flex; + align-items: stretch; + background-color: var(--oc-bg); + } + .code-line-numbers { + flex-shrink: 0; + padding: 1rem 0 1rem 1rem; + text-align: right; + user-select: none; + color: var(--text-tertiary); + } + .code-line-numbers span { + display: block; + font-family: 'Fira Code', var(--font-mono); + font-weight: 400; + font-size: 0.75rem; + line-height: 1.65; + letter-spacing: normal; + } + .code-content--numbered { + flex: 1; + min-width: 0; + padding: 1rem 1rem 1rem 0.75rem; + background-color: var(--background-light); + } + .code-content--numbered pre, + .code-content--numbered code { + font-family: 'Fira Code', var(--font-mono); + font-weight: 400; + font-size: 0.75rem; + line-height: 1.65; + letter-spacing: normal; + } +`; diff --git a/packages/oc-docs/src/components/Code/index.ts b/packages/oc-docs/src/components/Code/index.ts new file mode 100644 index 00000000..5bb8a8b7 --- /dev/null +++ b/packages/oc-docs/src/components/Code/index.ts @@ -0,0 +1,2 @@ +export { Code } from './Code'; +export { default } from './Code'; diff --git a/packages/oc-docs/src/components/CollectionConfiguration/CollectionConfiguration.spec.tsx b/packages/oc-docs/src/components/CollectionConfiguration/CollectionConfiguration.spec.tsx new file mode 100644 index 00000000..87897274 --- /dev/null +++ b/packages/oc-docs/src/components/CollectionConfiguration/CollectionConfiguration.spec.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { renderToStaticMarkup } from 'react-dom/server'; +import { describe, it, expect } from 'vitest'; +import type { HttpRequestHeader } from '@opencollection/types/requests/http'; +import { CollectionConfiguration } from './CollectionConfiguration'; +import { AUTH_MODE_LABELS } from '../../constants'; + +describe('CollectionConfiguration', () => { + it('renders nothing when there is no configuration', () => { + const html = renderToStaticMarkup(); + expect(html).toBe(''); + }); + + it('renders enabled headers, masks secret auth values and shows script/test code', () => { + const headers: HttpRequestHeader[] = [ + { name: 'Accept', value: 'application/json' }, + { name: 'X-Disabled', value: 'nope', disabled: true } + ]; + + const html = renderToStaticMarkup( + {})' }} + authModeLabels={AUTH_MODE_LABELS} + /> + ); + + // Enabled headers shown, disabled ones filtered out + expect(html).toContain('Accept'); + expect(html).toContain('application/json'); + expect(html).not.toContain('X-Disabled'); + + // Auth mode resolved via the supplied labels; username shown, password masked + expect(html).toContain('Basic Auth'); + expect(html).toContain('user@example.com'); + expect(html).not.toContain('s3cr3t'); + + // Script and test sections render + expect(html).toContain('Pre-Request'); + expect(html).toContain('Tests'); + }); + + it('falls back to the raw auth type when no label is supplied', () => { + const html = renderToStaticMarkup(); + expect(html).toContain('bearer'); + }); + + it('shows an empty hint for each subsection that has no items (when some config exists)', () => { + // Only auth is configured: headers, script and tests fall back to their hints. + const html = renderToStaticMarkup(); + expect(html).toContain('Add headers to inherit in all requests in the collection'); + expect(html).toContain('Add scripts to run for all requests in the collection'); + expect(html).toContain('Add tests to run for all requests in the collection'); + // Auth has data, so it shows rows rather than a hint. + expect(html).toContain('bearer'); + expect(html).not.toContain('Add authentication to inherit'); + }); +}); diff --git a/packages/oc-docs/src/components/CollectionConfiguration/CollectionConfiguration.tsx b/packages/oc-docs/src/components/CollectionConfiguration/CollectionConfiguration.tsx new file mode 100644 index 00000000..9ae0c881 --- /dev/null +++ b/packages/oc-docs/src/components/CollectionConfiguration/CollectionConfiguration.tsx @@ -0,0 +1,154 @@ +import React from 'react'; +import type { HttpRequestHeader } from '@opencollection/types/requests/http'; +import type { Auth } from '@opencollection/types/common/auth'; +import { Code } from '../Code'; +import { SecretValue } from '../SecretValue'; +import { SubHeading } from '../SubHeading'; +import { CollectionConfigurationWrapper } from './StyledWrapper'; + +interface CollectionScripts { + preRequest?: string; + postResponse?: string; + tests?: string; +} + +interface CollectionConfigurationProps { + headers?: HttpRequestHeader[]; + auth?: Auth; + /** Pre-normalised scripts ({ preRequest, postResponse, tests }) supplied by the host. */ + scripts?: CollectionScripts; + /** Maps an auth `type` to a display label (e.g. basic -> "Basic Auth"); supplied by the host. */ + authModeLabels?: Record; +} + +const containsVariable = (value: string): boolean => value.includes('{{'); + +const resolveAuthMode = (auth: Auth, labels: Record): string => + auth === 'inherit' ? 'Inherit' : labels[auth.type] || auth.type; + +const ConfigRow: React.FC<{ label: string; children: React.ReactNode }> = ({ label, children }) => ( +
+
{label}
+
{children}
+
+); + +const PlainValue: React.FC<{ value: string }> = ({ value }) => ( + {value} +); + +/** Italic placeholder shown for a configuration subsection that has no items yet. */ +const EmptyMessage: React.FC<{ children: React.ReactNode }> = ({ children }) => ( +

{children}

+); + +/** Read-only rows for the collection-level auth, derived from the auth `type`. */ +const AuthRows: React.FC<{ auth: Auth; labels: Record }> = ({ auth, labels }) => { + const rows: React.ReactNode[] = [ + + ]; + + if (auth !== 'inherit') { + switch (auth.type) { + case 'basic': + case 'digest': + case 'ntlm': + if (auth.username) rows.push(); + if (auth.password) rows.push(); + break; + case 'bearer': + if (auth.token) rows.push(); + break; + case 'apikey': + if (auth.key) rows.push(); + if (auth.value) rows.push(); + if (auth.placement) rows.push(); + break; + default: + break; + } + } + + return
{rows}
; +}; + +/** + * Read-only view of a collection's request defaults — headers, auth, scripts and tests. + * Fully prop-driven (no app constants/utils) so it can be lifted into a component package. + * Reuses `SecretValue` for sensitive values and `Code` for script/test snippets. + */ +export const CollectionConfiguration: React.FC = ({ + headers = [], + auth, + scripts = {}, + authModeLabels = {} +}) => { + const visibleHeaders = headers.filter((header) => header && header.name && header.disabled !== true); + const hasScripts = Boolean(scripts.preRequest || scripts.postResponse); + const hasConfig = visibleHeaders.length > 0 || Boolean(auth) || hasScripts || Boolean(scripts.tests); + + if (!hasConfig) { + return null; + } + + return ( + +
+ Headers + {visibleHeaders.length > 0 ? ( +
+ {visibleHeaders.map((header, index) => ( + + + + ))} +
+ ) : ( + Add headers to inherit in all requests in the collection + )} +
+ +
+ Auth + {auth ? ( + + ) : ( + Add authentication to inherit in all requests in the collection + )} +
+ +
+ Script + {hasScripts ? ( + <> + {scripts.preRequest && ( +
+

Pre-Request

+ +
+ )} + {scripts.postResponse && ( +
+

Post-Response

+ +
+ )} + + ) : ( + Add scripts to run for all requests in the collection + )} +
+ +
+ Tests + {scripts.tests ? ( + + ) : ( + Add tests to run for all requests in the collection + )} +
+ + ); +}; + +export default CollectionConfiguration; diff --git a/packages/oc-docs/src/components/CollectionConfiguration/StyledWrapper.ts b/packages/oc-docs/src/components/CollectionConfiguration/StyledWrapper.ts new file mode 100644 index 00000000..1681c548 --- /dev/null +++ b/packages/oc-docs/src/components/CollectionConfiguration/StyledWrapper.ts @@ -0,0 +1,87 @@ +import styled from '@emotion/styled'; + +export const CollectionConfigurationWrapper = styled.div` + .config-group + .config-group { + margin-top: 1.75rem; + } + + .config-empty-message { + margin: 0; + font-family: var(--font-sans); + font-weight: 500; + font-style: italic; + font-size: 0.8125rem; + line-height: 1; + letter-spacing: normal; + color: var(--text-secondary); + } + + .config-box { + margin: 0; + border: 1px solid var(--border-color); + border-radius: var(--oc-radius); + overflow: hidden; + } + + .config-row { + display: flex; + align-items: center; + gap: 1rem; + padding: 0.375rem 0.5rem; + border-bottom: 1px solid var(--border-color); + font-size: 0.8125rem; + min-height: 2.25rem; + } + .config-row:last-child { + border-bottom: none; + } + + .config-key { + font-family: var(--font-sans); + font-weight: 400; + font-size: 0.75rem; + line-height: 1; + letter-spacing: normal; + color: var(--text-secondary); + min-width: 7rem; + flex-shrink: 0; + } + .config-value-cell { + margin: 0; + flex: 1; + min-width: 0; + /* Single source of truth for value typography — every value rendered in the + cell (plain, variable, muted, and the masked SecretValue) inherits it. */ + font-family: 'Fira Code', var(--font-mono); + font-weight: 400; + font-size: 0.75rem; + line-height: 1; + letter-spacing: normal; + color: var(--text-primary); + } + .config-value { + word-break: break-all; + } + .config-value--var { + color: var(--primary-color); + } + /* SecretValue defaults to the app mono token; re-point it to the cell's font + so secret values match the rest of the section (size/weight inherit). The + descendant selector keeps specificity above SecretValue's own rule. */ + .config-value-cell .secret-value-text { + font-family: inherit; + } + + .script-block + .script-block { + margin-top: 1rem; + } + .script-label { + font-family: var(--font-sans); + font-weight: 500; + font-size: 0.625rem; + line-height: 1; + letter-spacing: 0.0525rem; + color: var(--text-tertiary); + margin: 0 0 0.375rem 0; + } +`; diff --git a/packages/oc-docs/src/components/CollectionConfiguration/index.ts b/packages/oc-docs/src/components/CollectionConfiguration/index.ts new file mode 100644 index 00000000..9fb80c81 --- /dev/null +++ b/packages/oc-docs/src/components/CollectionConfiguration/index.ts @@ -0,0 +1,2 @@ +export { CollectionConfiguration } from './CollectionConfiguration'; +export { default } from './CollectionConfiguration'; diff --git a/packages/oc-docs/src/components/CollectionStats/CollectionStats.spec.tsx b/packages/oc-docs/src/components/CollectionStats/CollectionStats.spec.tsx new file mode 100644 index 00000000..3d0d0d24 --- /dev/null +++ b/packages/oc-docs/src/components/CollectionStats/CollectionStats.spec.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { renderToStaticMarkup } from 'react-dom/server'; +import { describe, it, expect } from 'vitest'; +import { CollectionStats } from './CollectionStats'; + +describe('CollectionStats', () => { + it('renders each stat value with its label', () => { + const html = renderToStaticMarkup( + + ); + expect(html).toContain('30'); + expect(html).toContain('Requests'); + expect(html).toContain('7'); + expect(html).toContain('Folders'); + expect(html).toContain('3'); + expect(html).toContain('Environments'); + }); +}); diff --git a/packages/oc-docs/src/components/CollectionStats/CollectionStats.tsx b/packages/oc-docs/src/components/CollectionStats/CollectionStats.tsx new file mode 100644 index 00000000..0a3f332e --- /dev/null +++ b/packages/oc-docs/src/components/CollectionStats/CollectionStats.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { Stat } from '../Stat'; +import type { StatItem } from '../Stat'; +import { CollectionStatsWrapper } from './StyledWrapper'; + +interface CollectionStatsProps { + stats: StatItem[]; +} + +/** + * A row of labelled stats. Fully prop-driven (labels + values supplied by the host) + * and composed from the atomic `Stat` component. + */ +export const CollectionStats: React.FC = ({ stats }) => ( + + {stats.map((stat, index) => ( + + ))} + +); + +export default CollectionStats; diff --git a/packages/oc-docs/src/components/CollectionStats/StyledWrapper.ts b/packages/oc-docs/src/components/CollectionStats/StyledWrapper.ts new file mode 100644 index 00000000..a9be8e7e --- /dev/null +++ b/packages/oc-docs/src/components/CollectionStats/StyledWrapper.ts @@ -0,0 +1,13 @@ +import styled from '@emotion/styled'; + +export const CollectionStatsWrapper = styled.div` + display: flex; + align-items: stretch; + + /* Thin vertical divider between adjacent stats (equal spacing each side). */ + .stat + .stat { + margin-left: 1.5rem; + padding-left: 1.5rem; + border-left: 1px solid var(--border-color); + } +`; diff --git a/packages/oc-docs/src/components/CollectionStats/index.ts b/packages/oc-docs/src/components/CollectionStats/index.ts new file mode 100644 index 00000000..2b771956 --- /dev/null +++ b/packages/oc-docs/src/components/CollectionStats/index.ts @@ -0,0 +1,3 @@ +export { CollectionStats } from './CollectionStats'; +export type { StatItem } from '../Stat'; +export { default } from './CollectionStats'; diff --git a/packages/oc-docs/src/components/CopyButton/CopyButton.spec.tsx b/packages/oc-docs/src/components/CopyButton/CopyButton.spec.tsx new file mode 100644 index 00000000..2151fd71 --- /dev/null +++ b/packages/oc-docs/src/components/CopyButton/CopyButton.spec.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { renderToStaticMarkup } from 'react-dom/server'; +import { describe, it, expect } from 'vitest'; +import { CopyButton } from './CopyButton'; + +describe('CopyButton', () => { + it('renders an accessible button with the default copy label', () => { + const html = renderToStaticMarkup(); + expect(html).toContain(' { + const html = renderToStaticMarkup(); + expect(html).toContain('aria-label="Copy code"'); + }); +}); diff --git a/packages/oc-docs/src/components/CopyButton/CopyButton.tsx b/packages/oc-docs/src/components/CopyButton/CopyButton.tsx new file mode 100644 index 00000000..c8ef61bf --- /dev/null +++ b/packages/oc-docs/src/components/CopyButton/CopyButton.tsx @@ -0,0 +1,76 @@ +import React, { useCallback, useEffect, useRef, useState } from 'react'; +import { CopyButtonWrapper } from './StyledWrapper'; + +interface CopyButtonProps { + /** Text written to the clipboard when pressed. */ + text: string; + /** Accessible label in the idle state. */ + label?: string; + /** Accessible label shown briefly after a successful copy. */ + copiedLabel?: string; + /** How long (ms) the confirmation state persists. */ + resetAfterMs?: number; + className?: string; +} + +const CopyGlyph: React.FC = () => ( + +); + +const CheckGlyph: React.FC = () => ( + +); + +/** + * Accessible copy-to-clipboard button. Copies `text` on press and briefly swaps + * to a confirmation icon, with the accessible label switching to match. Fully + * prop-driven and unaware of where it sits, so it can be reused anywhere. + */ +export const CopyButton: React.FC = ({ + text, + label = 'Copy', + copiedLabel = 'Copied', + resetAfterMs = 2000, + className +}) => { + const [copied, setCopied] = useState(false); + const timeoutRef = useRef | undefined>(undefined); + + // Cancel a pending reset on unmount so we never set state on a gone component. + useEffect( + () => () => { + if (timeoutRef.current) clearTimeout(timeoutRef.current); + }, + [] + ); + + const handleCopy = useCallback(async () => { + if (!text || !navigator.clipboard) return; + try { + await navigator.clipboard.writeText(text); + setCopied(true); + if (timeoutRef.current) clearTimeout(timeoutRef.current); + timeoutRef.current = setTimeout(() => setCopied(false), resetAfterMs); + } catch { + // Clipboard unavailable (e.g. insecure context) — fail silently. + } + }, [text, resetAfterMs]); + + return ( + + {copied ? : } + + ); +}; + +export default CopyButton; diff --git a/packages/oc-docs/src/components/CopyButton/StyledWrapper.ts b/packages/oc-docs/src/components/CopyButton/StyledWrapper.ts new file mode 100644 index 00000000..e0a9cb03 --- /dev/null +++ b/packages/oc-docs/src/components/CopyButton/StyledWrapper.ts @@ -0,0 +1,28 @@ +import styled from '@emotion/styled'; + +/** + * Icon-only copy button. Owns its own look (the caller decides placement), so it + * stays reusable wherever a copy affordance is needed. + */ +export const CopyButtonWrapper = styled.button` + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.3rem; + border: 1px solid var(--border-color); + border-radius: var(--oc-radius); + color: var(--text-tertiary); + background-color: var(--background-light); + cursor: pointer; + transition: color 0.15s ease, background-color 0.15s ease; + + &:hover { + color: var(--text-secondary); + background-color: var(--badge-bg); + } + + &:focus-visible { + outline: 2px solid var(--primary-color); + outline-offset: 1px; + } +`; diff --git a/packages/oc-docs/src/components/CopyButton/index.ts b/packages/oc-docs/src/components/CopyButton/index.ts new file mode 100644 index 00000000..b18e4346 --- /dev/null +++ b/packages/oc-docs/src/components/CopyButton/index.ts @@ -0,0 +1,2 @@ +export { CopyButton } from './CopyButton'; +export { default } from './CopyButton'; diff --git a/packages/oc-docs/src/components/EmptyState/EmptyState.spec.tsx b/packages/oc-docs/src/components/EmptyState/EmptyState.spec.tsx new file mode 100644 index 00000000..67a5d510 --- /dev/null +++ b/packages/oc-docs/src/components/EmptyState/EmptyState.spec.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { renderToStaticMarkup } from 'react-dom/server'; +import { describe, it, expect } from 'vitest'; +import { EmptyState } from './EmptyState'; + +describe('EmptyState', () => { + it('renders the icon, heading and subheading', () => { + const html = renderToStaticMarkup( + } + heading="No environments yet" + subheading="Add one in Bruno to manage base URLs and variables." + /> + ); + + expect(html).toContain('No environments yet'); + expect(html).toContain('Add one in Bruno to manage base URLs and variables.'); + expect(html).toContain('data-testid="icon"'); + }); + + it('marks the icon as decorative for assistive technology', () => { + const html = renderToStaticMarkup( + } heading="Heading" subheading="Subheading" /> + ); + + expect(html).toContain('aria-hidden="true"'); + }); +}); diff --git a/packages/oc-docs/src/components/EmptyState/EmptyState.tsx b/packages/oc-docs/src/components/EmptyState/EmptyState.tsx new file mode 100644 index 00000000..13cc0e1c --- /dev/null +++ b/packages/oc-docs/src/components/EmptyState/EmptyState.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { EmptyStateWrapper } from './StyledWrapper'; + +interface EmptyStateProps { + /** Icon shown in the circular badge (decorative — hidden from assistive tech). */ + icon: React.ReactNode; + /** Bold primary message, e.g. "No environments yet". */ + heading: React.ReactNode; + /** Supporting description shown beneath the heading. */ + subheading: React.ReactNode; + className?: string; +} + +/** + * Placeholder shown when a section has no content. Renders a dashed card with a + * circular icon badge, a heading and a subheading. Icon-agnostic and fully + * prop-driven, so it can be reused for any empty section across pages. + */ +export const EmptyState: React.FC = ({ icon, heading, subheading, className }) => ( + + +

{heading}

+

{subheading}

+ +); + +export default EmptyState; diff --git a/packages/oc-docs/src/components/EmptyState/StyledWrapper.ts b/packages/oc-docs/src/components/EmptyState/StyledWrapper.ts new file mode 100644 index 00000000..0331535c --- /dev/null +++ b/packages/oc-docs/src/components/EmptyState/StyledWrapper.ts @@ -0,0 +1,49 @@ +import styled from '@emotion/styled'; + +/** + * Dashed placeholder card for an empty section: a circular icon badge stacked + * above a heading and a supporting subheading, all centered. Styling is driven + * entirely by the docs theme variables so it stays portable across pages. + */ +export const EmptyStateWrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + min-height: 16rem; + padding: 2.5rem 2rem; + border: 1px dashed var(--border-color); + border-radius: var(--oc-radius); + + .empty-state-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 3rem; + height: 3rem; + margin-bottom: 1.25rem; + border-radius: 50%; + background: var(--badge-bg); + color: var(--text-tertiary); + } + + .empty-state-heading { + margin: 0 0 0.5rem 0; + font-family: var(--font-sans); + font-weight: 600; + font-size: 0.9375rem; + line-height: 1.3; + color: var(--text-primary); + } + + .empty-state-subheading { + margin: 0; + max-width: 22rem; + font-family: var(--font-sans); + font-weight: 400; + font-size: 0.8125rem; + line-height: 1.5; + color: var(--text-secondary); + } +`; diff --git a/packages/oc-docs/src/components/EmptyState/index.ts b/packages/oc-docs/src/components/EmptyState/index.ts new file mode 100644 index 00000000..aca04926 --- /dev/null +++ b/packages/oc-docs/src/components/EmptyState/index.ts @@ -0,0 +1,2 @@ +export { EmptyState } from './EmptyState'; +export { default } from './EmptyState'; diff --git a/packages/oc-docs/src/components/EnvironmentSummary/EnvironmentSummary.spec.tsx b/packages/oc-docs/src/components/EnvironmentSummary/EnvironmentSummary.spec.tsx new file mode 100644 index 00000000..d1943e60 --- /dev/null +++ b/packages/oc-docs/src/components/EnvironmentSummary/EnvironmentSummary.spec.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { renderToStaticMarkup } from 'react-dom/server'; +import { describe, it, expect } from 'vitest'; +import type { Environment } from '@opencollection/types/config/environments'; +import { EnvironmentSummary } from './EnvironmentSummary'; + +const env = (name: string): Environment => ({ name, variables: [] }); + +describe('EnvironmentSummary', () => { + it('renders nothing when there are no environments', () => { + expect(renderToStaticMarkup()).toBe(''); + }); + + it('renders an item for each environment', () => { + const html = renderToStaticMarkup( + + ); + expect(html).toContain('Production'); + expect(html).toContain('Staging'); + }); +}); diff --git a/packages/oc-docs/src/components/EnvironmentSummary/EnvironmentSummary.tsx b/packages/oc-docs/src/components/EnvironmentSummary/EnvironmentSummary.tsx new file mode 100644 index 00000000..8cf3fbd2 --- /dev/null +++ b/packages/oc-docs/src/components/EnvironmentSummary/EnvironmentSummary.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import type { Environment } from '@opencollection/types/config/environments'; +import { EnvironmentSummaryItem } from '../EnvironmentSummaryItem'; +import { EnvironmentSummaryWrapper } from './StyledWrapper'; + +interface EnvironmentSummaryProps { + environments: Environment[]; +} + +/** Read-only list of a collection's environments, composed from `EnvironmentSummaryItem`. */ +export const EnvironmentSummary: React.FC = ({ environments }) => { + if (!environments.length) { + return null; + } + + return ( + + {environments.map((environment, index) => ( + + ))} + + ); +}; + +export default EnvironmentSummary; diff --git a/packages/oc-docs/src/components/EnvironmentSummary/StyledWrapper.ts b/packages/oc-docs/src/components/EnvironmentSummary/StyledWrapper.ts new file mode 100644 index 00000000..8f5176a2 --- /dev/null +++ b/packages/oc-docs/src/components/EnvironmentSummary/StyledWrapper.ts @@ -0,0 +1,9 @@ +import styled from '@emotion/styled'; + +export const EnvironmentSummaryWrapper = styled.ul` + display: flex; + flex-direction: column; + list-style: none; + margin: 0; + padding: 0; +`; diff --git a/packages/oc-docs/src/components/EnvironmentSummary/index.ts b/packages/oc-docs/src/components/EnvironmentSummary/index.ts new file mode 100644 index 00000000..2ed7d81e --- /dev/null +++ b/packages/oc-docs/src/components/EnvironmentSummary/index.ts @@ -0,0 +1,2 @@ +export { EnvironmentSummary } from './EnvironmentSummary'; +export { default } from './EnvironmentSummary'; diff --git a/packages/oc-docs/src/components/EnvironmentSummaryItem/EnvironmentSummaryItem.spec.tsx b/packages/oc-docs/src/components/EnvironmentSummaryItem/EnvironmentSummaryItem.spec.tsx new file mode 100644 index 00000000..bbc3e705 --- /dev/null +++ b/packages/oc-docs/src/components/EnvironmentSummaryItem/EnvironmentSummaryItem.spec.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { renderToStaticMarkup } from 'react-dom/server'; +import { describe, it, expect } from 'vitest'; +import type { Environment } from '@opencollection/types/config/environments'; +import { EnvironmentSummaryItem } from './EnvironmentSummaryItem'; + +const env = (name: string, variableCount: number): Environment => ({ + name, + variables: Array.from({ length: variableCount }, (_, i) => ({ name: `var${i}`, value: '' })) +}); + +describe('EnvironmentSummaryItem', () => { + it('renders the environment name', () => { + const html = renderToStaticMarkup(); + expect(html).toContain('Production'); + }); + + it('pluralises the variable count', () => { + expect(renderToStaticMarkup()).toContain('1 variable'); + expect(renderToStaticMarkup()).toContain('8 variables'); + expect(renderToStaticMarkup()).toContain('0 variables'); + }); +}); diff --git a/packages/oc-docs/src/components/EnvironmentSummaryItem/EnvironmentSummaryItem.tsx b/packages/oc-docs/src/components/EnvironmentSummaryItem/EnvironmentSummaryItem.tsx new file mode 100644 index 00000000..30d80d7e --- /dev/null +++ b/packages/oc-docs/src/components/EnvironmentSummaryItem/EnvironmentSummaryItem.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import type { Environment } from '@opencollection/types/config/environments'; +import { EnvironmentSummaryItemWrapper } from './StyledWrapper'; + +/** Human-readable variable count, e.g. "1 variable" / "5 variables". */ +const formatVariableCount = (count: number): string => `${count} variable${count === 1 ? '' : 's'}`; + +interface EnvironmentSummaryItemProps { + environment: Environment; +} + +/** A single environment row: color dot, name, and variable count. Renders an `
  • `. */ +export const EnvironmentSummaryItem: React.FC = ({ environment }) => ( + + + {environment.name} + + {formatVariableCount(environment.variables?.length ?? 0)} + +); + +export default EnvironmentSummaryItem; diff --git a/packages/oc-docs/src/components/EnvironmentSummaryItem/StyledWrapper.ts b/packages/oc-docs/src/components/EnvironmentSummaryItem/StyledWrapper.ts new file mode 100644 index 00000000..49cf2234 --- /dev/null +++ b/packages/oc-docs/src/components/EnvironmentSummaryItem/StyledWrapper.ts @@ -0,0 +1,38 @@ +import styled from '@emotion/styled'; + +export const EnvironmentSummaryItemWrapper = styled.li` + display: flex; + align-items: center; + gap: 0.625rem; + padding: 0.3rem 0; + font-family: var(--font-sans); + font-weight: 400; + font-size: 0.75rem; + line-height: 1.125rem; + letter-spacing: normal; + + &:last-child { + border-bottom: none; + } + + .environment-summary-dot { + width: 8px; + height: 8px; + border-radius: 50%; + flex-shrink: 0; + background: var(--text-tertiary); + } + + .environment-summary-name { + color: var(--text-primary); + } + + .environment-summary-spacer { + flex: 1; + } + + .environment-summary-vars { + color: var(--text-tertiary); + flex-shrink: 0; + } +`; diff --git a/packages/oc-docs/src/components/EnvironmentSummaryItem/index.ts b/packages/oc-docs/src/components/EnvironmentSummaryItem/index.ts new file mode 100644 index 00000000..71e131f2 --- /dev/null +++ b/packages/oc-docs/src/components/EnvironmentSummaryItem/index.ts @@ -0,0 +1,2 @@ +export { EnvironmentSummaryItem } from './EnvironmentSummaryItem'; +export { default } from './EnvironmentSummaryItem'; diff --git a/packages/oc-docs/src/components/Heading/Heading.spec.tsx b/packages/oc-docs/src/components/Heading/Heading.spec.tsx new file mode 100644 index 00000000..393e2d72 --- /dev/null +++ b/packages/oc-docs/src/components/Heading/Heading.spec.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { renderToStaticMarkup } from 'react-dom/server'; +import { describe, it, expect } from 'vitest'; +import { Heading } from './Heading'; + +describe('Heading', () => { + it('renders its children as an h1 by default', () => { + const html = renderToStaticMarkup(Hotel Booking API); + expect(html).toContain('Hotel Booking API'); + expect(html).toContain(' { + const html = renderToStaticMarkup(Section); + expect(html).toContain(' = ({ children, as = 'h1', className }) => ( + + {children} + +); + +export default Heading; diff --git a/packages/oc-docs/src/components/Heading/StyledWrapper.ts b/packages/oc-docs/src/components/Heading/StyledWrapper.ts new file mode 100644 index 00000000..23825f2b --- /dev/null +++ b/packages/oc-docs/src/components/Heading/StyledWrapper.ts @@ -0,0 +1,16 @@ +import styled from '@emotion/styled'; + +/** + * Shared heading typography: + * Inter · Semi Bold (600) · 20px (1.25rem) · 100% line-height · -0.5px letter-spacing. + * Font size is in rem so it scales with the root font size. + */ +export const HeadingWrapper = styled.h1` + margin: 0; + font-family: var(--font-sans); + font-weight: 600; + font-size: 1.25rem; + line-height: 1; + letter-spacing: -0.5px; + color: var(--text-primary); +`; diff --git a/packages/oc-docs/src/components/Heading/index.ts b/packages/oc-docs/src/components/Heading/index.ts new file mode 100644 index 00000000..492b7798 --- /dev/null +++ b/packages/oc-docs/src/components/Heading/index.ts @@ -0,0 +1,2 @@ +export { Heading } from './Heading'; +export { default } from './Heading'; diff --git a/packages/oc-docs/src/components/PageWrapper/PageWrapper.spec.tsx b/packages/oc-docs/src/components/PageWrapper/PageWrapper.spec.tsx new file mode 100644 index 00000000..3b34d0e8 --- /dev/null +++ b/packages/oc-docs/src/components/PageWrapper/PageWrapper.spec.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { renderToStaticMarkup } from 'react-dom/server'; +import { describe, it, expect } from 'vitest'; +import { PageWrapper } from './PageWrapper'; + +describe('PageWrapper', () => { + it('renders its children', () => { + const html = renderToStaticMarkup( + + page content + + ); + expect(html).toContain('page content'); + }); +}); diff --git a/packages/oc-docs/src/components/PageWrapper/PageWrapper.tsx b/packages/oc-docs/src/components/PageWrapper/PageWrapper.tsx new file mode 100644 index 00000000..0bc66666 --- /dev/null +++ b/packages/oc-docs/src/components/PageWrapper/PageWrapper.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { PageWrapperContainer } from './StyledWrapper'; + +interface PageWrapperProps { + children: React.ReactNode; + /** Optional extra class for the page (merged with the base `page-wrapper` class). */ + className?: string; +} + +/** + * Common layout wrapper for pages. Applies the shared page padding so every page has + * consistent gutters; pages render their own content inside it. Presentational and + * prop-driven, so it can be lifted into a component package. + */ +export const PageWrapper: React.FC = ({ children, className }) => ( + + {children} + +); + +export default PageWrapper; diff --git a/packages/oc-docs/src/components/PageWrapper/StyledWrapper.ts b/packages/oc-docs/src/components/PageWrapper/StyledWrapper.ts new file mode 100644 index 00000000..16f5c5e1 --- /dev/null +++ b/packages/oc-docs/src/components/PageWrapper/StyledWrapper.ts @@ -0,0 +1,9 @@ +import styled from '@emotion/styled'; + +/** + * Shared page padding: 15px top/bottom (0.9375rem), 48px left/right (3rem). + * Expressed in rems so it scales with the root font size. + */ +export const PageWrapperContainer = styled.div` + padding: 0.9375rem 3.5rem; +`; diff --git a/packages/oc-docs/src/components/PageWrapper/index.ts b/packages/oc-docs/src/components/PageWrapper/index.ts new file mode 100644 index 00000000..e97c548f --- /dev/null +++ b/packages/oc-docs/src/components/PageWrapper/index.ts @@ -0,0 +1,2 @@ +export { PageWrapper } from './PageWrapper'; +export { default } from './PageWrapper'; diff --git a/packages/oc-docs/src/components/SecretValue/SecretValue.spec.tsx b/packages/oc-docs/src/components/SecretValue/SecretValue.spec.tsx new file mode 100644 index 00000000..9ad91fbe --- /dev/null +++ b/packages/oc-docs/src/components/SecretValue/SecretValue.spec.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { renderToStaticMarkup } from 'react-dom/server'; +import { describe, it, expect } from 'vitest'; +import { SecretValue, SECRET_MASK } from './SecretValue'; + +describe('SecretValue', () => { + it('masks the value by default and never renders the real value', () => { + const html = renderToStaticMarkup(); + expect(html).not.toContain('s3cr3t-token'); + expect(html).toContain(SECRET_MASK); + }); +}); diff --git a/packages/oc-docs/src/components/SecretValue/SecretValue.tsx b/packages/oc-docs/src/components/SecretValue/SecretValue.tsx new file mode 100644 index 00000000..e8946ed8 --- /dev/null +++ b/packages/oc-docs/src/components/SecretValue/SecretValue.tsx @@ -0,0 +1,52 @@ +import React, { useState } from 'react'; +import { SecretValueWrapper } from './StyledWrapper'; + +/** Fixed-length mask so the real length of the secret is never leaked. */ +export const SECRET_MASK = '•'.repeat(12); + +interface SecretValueProps { + value: string; +} + +const EyeIcon: React.FC<{ off?: boolean }> = ({ off }) => ( + +); + +/** + * A masked, reveal-on-demand value (used for passwords/tokens in read-only config). + * The masked form is a fixed length so the secret's true length is not exposed. + */ +export const SecretValue: React.FC = ({ value }) => { + const [revealed, setRevealed] = useState(false); + + return ( + + {/* While masked, hide the placeholder dots from assistive tech so they aren't + read out as "bullet" repeatedly; the toggle's label conveys it's hidden. */} + {revealed ? value : SECRET_MASK} + + + ); +}; + +export default SecretValue; diff --git a/packages/oc-docs/src/components/SecretValue/StyledWrapper.ts b/packages/oc-docs/src/components/SecretValue/StyledWrapper.ts new file mode 100644 index 00000000..66e6550f --- /dev/null +++ b/packages/oc-docs/src/components/SecretValue/StyledWrapper.ts @@ -0,0 +1,28 @@ +import styled from '@emotion/styled'; + +export const SecretValueWrapper = styled.span` + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.5rem; + + .secret-value-text { + font-family: var(--font-mono); + color: var(--text-primary); + word-break: break-all; + } + + .secret-value-toggle { + display: inline-flex; + align-items: center; + padding: 0; + background: none; + border: none; + cursor: pointer; + color: var(--text-tertiary); + flex-shrink: 0; + } + .secret-value-toggle:hover { + color: var(--text-secondary); + } +`; diff --git a/packages/oc-docs/src/components/SecretValue/index.ts b/packages/oc-docs/src/components/SecretValue/index.ts new file mode 100644 index 00000000..3ea9d93d --- /dev/null +++ b/packages/oc-docs/src/components/SecretValue/index.ts @@ -0,0 +1,2 @@ +export { SecretValue, SECRET_MASK } from './SecretValue'; +export { default } from './SecretValue'; diff --git a/packages/oc-docs/src/components/Section/Section.spec.tsx b/packages/oc-docs/src/components/Section/Section.spec.tsx new file mode 100644 index 00000000..9b28debd --- /dev/null +++ b/packages/oc-docs/src/components/Section/Section.spec.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { renderToStaticMarkup } from 'react-dom/server'; +import { describe, it, expect } from 'vitest'; +import { Section } from './Section'; + +describe('Section', () => { + it('renders the label and its content', () => { + const html = renderToStaticMarkup( +
    +

    List content

    +
    + ); + expect(html).toContain('Environments'); + expect(html).toContain('List content'); + }); +}); diff --git a/packages/oc-docs/src/components/Section/Section.tsx b/packages/oc-docs/src/components/Section/Section.tsx new file mode 100644 index 00000000..e3abd4fe --- /dev/null +++ b/packages/oc-docs/src/components/Section/Section.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { SectionLabel } from '../SectionLabel'; +import { SectionWrapper } from './StyledWrapper'; + +interface SectionProps { + /** Heading shown above the content (rendered through `SectionLabel`). */ + label: React.ReactNode; + children: React.ReactNode; + className?: string; +} + +/** + * A labelled content section: a `SectionLabel` heading followed by its content. + * Owns the spacing between consecutive sections, so callers can stack them + * without managing margins. Reusable across pages. + */ +export const Section: React.FC = ({ label, children, className }) => ( + + {label} + {children} + +); + +export default Section; diff --git a/packages/oc-docs/src/components/Section/StyledWrapper.ts b/packages/oc-docs/src/components/Section/StyledWrapper.ts new file mode 100644 index 00000000..f1b03753 --- /dev/null +++ b/packages/oc-docs/src/components/Section/StyledWrapper.ts @@ -0,0 +1,11 @@ +import styled from '@emotion/styled'; + +/** + * Wrapper for a labelled page section. Owns the spacing between consecutive + * sections (`& + &`) so callers can stack them without managing margins. + */ +export const SectionWrapper = styled.section` + & + & { + margin-top: 2rem; + } +`; diff --git a/packages/oc-docs/src/components/Section/index.ts b/packages/oc-docs/src/components/Section/index.ts new file mode 100644 index 00000000..6d43f65d --- /dev/null +++ b/packages/oc-docs/src/components/Section/index.ts @@ -0,0 +1,2 @@ +export { Section } from './Section'; +export { default } from './Section'; diff --git a/packages/oc-docs/src/components/SectionLabel/SectionLabel.spec.tsx b/packages/oc-docs/src/components/SectionLabel/SectionLabel.spec.tsx new file mode 100644 index 00000000..9d36c3cb --- /dev/null +++ b/packages/oc-docs/src/components/SectionLabel/SectionLabel.spec.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { renderToStaticMarkup } from 'react-dom/server'; +import { describe, it, expect } from 'vitest'; +import { SectionLabel } from './SectionLabel'; + +describe('SectionLabel', () => { + it('renders its children as an h2 by default', () => { + const html = renderToStaticMarkup(Environments); + expect(html).toContain('Environments'); + expect(html).toContain(' { + const html = renderToStaticMarkup(Headers); + expect(html).toContain(' = ({ children, as = 'h2', className }) => ( + + {children} + +); + +export default SectionLabel; diff --git a/packages/oc-docs/src/components/SectionLabel/StyledWrapper.ts b/packages/oc-docs/src/components/SectionLabel/StyledWrapper.ts new file mode 100644 index 00000000..6a31a825 --- /dev/null +++ b/packages/oc-docs/src/components/SectionLabel/StyledWrapper.ts @@ -0,0 +1,17 @@ +import styled from '@emotion/styled'; + +/** + * Section label typography: + * Inter · Semi Bold (600) · 11px (0.6875rem) · 100% line-height · 1.4px tracking · uppercase. + * Font size is in rem so it scales with the root font size. + */ +export const SectionLabelWrapper = styled.h2` + margin: 0 0 0.75rem 0; + font-family: var(--font-sans); + font-weight: 600; + font-size: 0.6875rem; + line-height: 1; + letter-spacing: 1.4px; + text-transform: uppercase; + color: var(--text-tertiary); +`; diff --git a/packages/oc-docs/src/components/SectionLabel/index.ts b/packages/oc-docs/src/components/SectionLabel/index.ts new file mode 100644 index 00000000..29f8b0f0 --- /dev/null +++ b/packages/oc-docs/src/components/SectionLabel/index.ts @@ -0,0 +1,2 @@ +export { SectionLabel } from './SectionLabel'; +export { default } from './SectionLabel'; diff --git a/packages/oc-docs/src/components/Stat/Stat.spec.tsx b/packages/oc-docs/src/components/Stat/Stat.spec.tsx new file mode 100644 index 00000000..46697e71 --- /dev/null +++ b/packages/oc-docs/src/components/Stat/Stat.spec.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { renderToStaticMarkup } from 'react-dom/server'; +import { describe, it, expect } from 'vitest'; +import { Stat } from './Stat'; + +describe('Stat', () => { + it('renders the value and label', () => { + const html = renderToStaticMarkup(); + expect(html).toContain('30'); + expect(html).toContain('Requests'); + }); +}); diff --git a/packages/oc-docs/src/components/Stat/Stat.tsx b/packages/oc-docs/src/components/Stat/Stat.tsx new file mode 100644 index 00000000..dd3bbbc2 --- /dev/null +++ b/packages/oc-docs/src/components/Stat/Stat.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { StatWrapper } from './StyledWrapper'; + +export interface StatItem { + label: string; + value: number | string; +} + +/** A single labelled stat — a large value with a caption below. Reusable anywhere. */ +export const Stat: React.FC = ({ label, value }) => ( + + {value} + {label} + +); + +export default Stat; diff --git a/packages/oc-docs/src/components/Stat/StyledWrapper.ts b/packages/oc-docs/src/components/Stat/StyledWrapper.ts new file mode 100644 index 00000000..34913407 --- /dev/null +++ b/packages/oc-docs/src/components/Stat/StyledWrapper.ts @@ -0,0 +1,25 @@ +import styled from '@emotion/styled'; + +export const StatWrapper = styled.div` + display: flex; + flex-direction: column; + gap: 0.25rem; + + .stat-value { + font-family: var(--font-sans); + font-weight: 700; + font-size: 1.25rem; + line-height: 1; + letter-spacing: normal; + color: var(--text-primary); + } + + .stat-label { + font-family: var(--font-sans); + font-weight: 400; + font-size: 0.78125rem; + line-height: 1; + letter-spacing: normal; + color: var(--text-secondary); + } +`; diff --git a/packages/oc-docs/src/components/Stat/index.ts b/packages/oc-docs/src/components/Stat/index.ts new file mode 100644 index 00000000..acda6a65 --- /dev/null +++ b/packages/oc-docs/src/components/Stat/index.ts @@ -0,0 +1,3 @@ +export { Stat } from './Stat'; +export type { StatItem } from './Stat'; +export { default } from './Stat'; diff --git a/packages/oc-docs/src/components/SubHeading/StyledWrapper.ts b/packages/oc-docs/src/components/SubHeading/StyledWrapper.ts new file mode 100644 index 00000000..d6efae27 --- /dev/null +++ b/packages/oc-docs/src/components/SubHeading/StyledWrapper.ts @@ -0,0 +1,16 @@ +import styled from '@emotion/styled'; + +/** + * Sub-heading typography: + * Inter · Semi Bold (600) · 13px (0.8125rem) · 12px (0.75rem) line-height · 0 letter-spacing. + * Font size is in rem so it scales with the root font size. + */ +export const SubHeadingWrapper = styled.h3` + margin: 0 0 0.625rem 0; + font-family: var(--font-sans); + font-weight: 600; + font-size: 0.8125rem; + line-height: 0.75rem; + letter-spacing: normal; + color: var(--text-primary); +`; diff --git a/packages/oc-docs/src/components/SubHeading/SubHeading.spec.tsx b/packages/oc-docs/src/components/SubHeading/SubHeading.spec.tsx new file mode 100644 index 00000000..0693ea73 --- /dev/null +++ b/packages/oc-docs/src/components/SubHeading/SubHeading.spec.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { renderToStaticMarkup } from 'react-dom/server'; +import { describe, it, expect } from 'vitest'; +import { SubHeading } from './SubHeading'; + +describe('SubHeading', () => { + it('renders its children as an h3 by default', () => { + const html = renderToStaticMarkup(Headers); + expect(html).toContain('Headers'); + expect(html).toContain(' { + const html = renderToStaticMarkup(Auth); + expect(html).toContain(' = ({ children, as = 'h3', className }) => ( + + {children} + +); + +export default SubHeading; diff --git a/packages/oc-docs/src/components/SubHeading/index.ts b/packages/oc-docs/src/components/SubHeading/index.ts new file mode 100644 index 00000000..fc86bf4f --- /dev/null +++ b/packages/oc-docs/src/components/SubHeading/index.ts @@ -0,0 +1,2 @@ +export { SubHeading } from './SubHeading'; +export { default } from './SubHeading'; diff --git a/packages/oc-docs/src/constants/constants.ts b/packages/oc-docs/src/constants/constants.ts new file mode 100644 index 00000000..d1ea1631 --- /dev/null +++ b/packages/oc-docs/src/constants/constants.ts @@ -0,0 +1,14 @@ +/** + * Human-readable labels for collection/request auth modes. + */ +export const AUTH_MODE_LABELS: Record = { + basic: 'Basic Auth', + bearer: 'Bearer Token', + apikey: 'API Key', + oauth2: 'OAuth 2.0', + oauth1: 'OAuth 1.0', + digest: 'Digest Auth', + awsv4: 'AWS Signature v4', + ntlm: 'NTLM', + wsse: 'WSSE' +}; diff --git a/packages/oc-docs/src/constants/index.ts b/packages/oc-docs/src/constants/index.ts new file mode 100644 index 00000000..30a9ccac --- /dev/null +++ b/packages/oc-docs/src/constants/index.ts @@ -0,0 +1 @@ +export { AUTH_MODE_LABELS } from './constants'; diff --git a/packages/oc-docs/src/pages/Overview/Overview.spec.tsx b/packages/oc-docs/src/pages/Overview/Overview.spec.tsx new file mode 100644 index 00000000..bd8d6907 --- /dev/null +++ b/packages/oc-docs/src/pages/Overview/Overview.spec.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { renderToStaticMarkup } from 'react-dom/server'; +import { describe, it, expect } from 'vitest'; +import type { OpenCollection } from '@opencollection/types'; +import { Overview } from './Overview'; + +describe('Overview', () => { + it('renders the headline, stats, environments, docs and configuration', () => { + const collection: OpenCollection = { + info: { name: 'Hotel Booking API', version: '1.0.0' }, + config: { environments: [{ name: 'Development', variables: [{ name: 'baseUrl', value: 'x' }] }] }, + request: { headers: [{ name: 'Accept', value: 'application/json' }] }, + docs: '# Getting started\nUse this API.' + }; + + const html = renderToStaticMarkup(); + + expect(html).toContain('Hotel Booking API'); + expect(html).toContain('v1.0.0'); // version is "v"-prefixed for display + expect(html).toContain('Development'); + expect(html).toContain('1 variable'); + expect(html).toContain('Accept'); + expect(html).toContain('application/json'); + expect(html).toContain('Getting started'); // collection docs rendered + expect(html).toContain('Collection Configuration'); + }); + + it('renders an empty-state placeholder for each section when the collection is bare', () => { + const collection: OpenCollection = { + info: { name: 'Empty API', version: '1.0.0' } + }; + + const html = renderToStaticMarkup(); + + expect(html).toContain('No environments yet'); + expect(html).toContain('No overview content yet'); + expect(html).toContain('No configuration set'); + }); +}); diff --git a/packages/oc-docs/src/pages/Overview/Overview.tsx b/packages/oc-docs/src/pages/Overview/Overview.tsx new file mode 100644 index 00000000..50701e9f --- /dev/null +++ b/packages/oc-docs/src/pages/Overview/Overview.tsx @@ -0,0 +1,132 @@ +import React, { useMemo } from 'react'; +import type { OpenCollection } from '@opencollection/types'; +import type { StructuredText } from '@opencollection/types/common/description'; +import { useMarkdownRenderer } from '../../hooks'; +import { getCollectionStats } from '../../utils/collectionStats'; +import { hasCollectionConfiguration } from '../../utils/collectionConfiguration'; +import { scriptsArrayToObject } from '../../utils/schemaHelpers'; +import { formatCollectionVersion } from '../../utils/common'; +import { AUTH_MODE_LABELS } from '../../constants'; +import { CollectionStats } from '../../components/CollectionStats'; +import { EnvironmentSummary } from '../../components/EnvironmentSummary'; +import { CollectionConfiguration } from '../../components/CollectionConfiguration'; +import { EmptyState } from '../../components/EmptyState'; +import { PageWrapper } from '../../components/PageWrapper'; +import { Heading } from '../../components/Heading'; +import { Section } from '../../components/Section'; +import { GlobeIcon, BookIcon } from '../../assets/icons'; +import { OverviewWrapper } from './StyledWrapper'; + +/** Extracts the markdown string from a collection's `docs` (string or structured text). */ +const getDocsContent = (docs: OpenCollection['docs']): string => { + if (!docs) return ''; + return typeof docs === 'string' ? docs : (docs as StructuredText)?.content || ''; +}; + +interface OverviewProps { + collection: OpenCollection; +} + +/** + * The collection Overview page. Acts as the composition root: it reads app constants + * and utils, then passes plain data + config down to the atomic, package-ready + * components (which import nothing app-specific). + */ +export const Overview: React.FC = ({ collection }) => { + const md = useMarkdownRenderer(); + + const counts = useMemo(() => getCollectionStats(collection), [collection]); + const stats = useMemo( + () => [ + { label: 'Requests', value: counts.requestCount }, + { label: 'Folders', value: counts.folderCount }, + { label: 'Environments', value: counts.environmentCount } + ], + [counts] + ); + const scripts = useMemo(() => scriptsArrayToObject(collection.request?.scripts), [collection.request]); + const version = formatCollectionVersion(collection.info?.version); + const name = collection.info?.name || 'Untitled Collection'; + const environments = collection.config?.environments ?? []; + + const docsHtml = useMemo(() => { + const content = getDocsContent(collection.docs); + return content ? md.render(content) : ''; + }, [collection.docs, md]); + + const hasEnvironments = environments.length > 0; + const hasOverview = Boolean(docsHtml); + const hasConfig = useMemo( + () => hasCollectionConfiguration(collection.request?.headers, collection.request?.auth, scripts), + [collection.request, scripts] + ); + + return ( + + +
    +
    + {version &&
    {version}
    } + {name} +
    +
    + +
    + +
    + +
    +
    +
    + {hasEnvironments ? ( + + ) : ( + } + heading="No environments yet" + subheading="This collection has no environments configured. Add one in Bruno to manage base URLs and variables." + /> + )} +
    + +
    + {hasOverview ? ( +
    + ) : ( + } + heading="No overview content yet" + subheading="This collection has no description or readme. Add one in Bruno to introduce your API to readers — what it does, who it's for, and how to authenticate." + /> + )} +
    +
    + +
    +
    + {hasConfig ? ( + + ) : ( + } + heading="No configuration set" + subheading="This collection has no shared headers, auth, scripts, variables, or tests. Configure them in Bruno and they'll appear here." + /> + )} +
    +
    +
    +     +     + ); +}; + +export default Overview; diff --git a/packages/oc-docs/src/pages/Overview/StyledWrapper.ts b/packages/oc-docs/src/pages/Overview/StyledWrapper.ts new file mode 100644 index 00000000..5a253ca6 --- /dev/null +++ b/packages/oc-docs/src/pages/Overview/StyledWrapper.ts @@ -0,0 +1,52 @@ +import styled from '@emotion/styled'; + +/** + * Layout for the collection Overview page. Pure styled-component (Emotion) driven by + * the docs theme CSS variables, so it stays portable if extracted into a package. + * Content styling lives in the individual components; this owns page-level layout. + */ +export const OverviewWrapper = styled.div` + max-width: 1100px; + margin: 0 auto; + color: var(--text-primary); + padding-bottom: 2rem; + border-bottom: 1px solid var(--border-color); + + .overview-headline { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 1rem; + } + .overview-version { + font-family: var(--font-sans); + font-size: 0.75rem; + color: var(--text-tertiary); + margin-bottom: 0.3rem; + font-weight: 600; + } + .overview-stats-row { + margin-top: 1.5rem; + } + + /* The divider lives on the body, so it only appears when there are sections to show. */ + .overview-body { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + gap: 3rem; + margin-top: 2rem; + padding-top: 2rem; + border-top: 1px solid var(--border-color); + } + + @media (max-width: 1100px) { + .overview-body { + grid-template-columns: 1fr; + gap: 2rem; + } + } + + .overview-markdown { + margin-top: 0.25rem; + } +`; diff --git a/packages/oc-docs/src/pages/Overview/index.ts b/packages/oc-docs/src/pages/Overview/index.ts new file mode 100644 index 00000000..234bebcc --- /dev/null +++ b/packages/oc-docs/src/pages/Overview/index.ts @@ -0,0 +1,2 @@ +export { Overview } from './Overview'; +export { default } from './Overview'; diff --git a/packages/oc-docs/src/styles/index.css b/packages/oc-docs/src/styles/index.css index 102c1197..c825a3a2 100644 --- a/packages/oc-docs/src/styles/index.css +++ b/packages/oc-docs/src/styles/index.css @@ -33,7 +33,6 @@ /* Border colors */ --border-color: var(--oc-border-border1); - --border-light: #EFEFEF; /* Code colors */ --code-bg: var(--oc-background-crust); /* approx: old #f6f8fa */ @@ -73,23 +72,6 @@ /* Fonts */ --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; - - /* Theme variables */ - --background-color: var(--background-light); - --text-primary: var(--text-light); - --text-secondary: #6b6b6b; - --text-tertiary: #838383; - --border-color: var(--border-light); - --code-bg: var(--code-bg-light); - --code-text: var(--code-text-light); - --prose-code-bg: #f5f5f5; - --prose-code-text: #d97706; - --table-header-bg: var(--table-header-bg-light); - --table-row-odd-bg: var(--table-row-odd-bg-light); - --table-row-even-bg: var(--table-row-even-bg-light); - --input-bg: var(--input-bg-light); - --badge-bg: var(--badge-bg-light); - --badge-text: var(--badge-text-light); } /* ================================================================ diff --git a/packages/oc-docs/src/utils/collectionConfiguration.spec.ts b/packages/oc-docs/src/utils/collectionConfiguration.spec.ts new file mode 100644 index 00000000..361eb6ed --- /dev/null +++ b/packages/oc-docs/src/utils/collectionConfiguration.spec.ts @@ -0,0 +1,28 @@ +import { describe, it, expect } from 'vitest'; +import { hasCollectionConfiguration } from './collectionConfiguration'; + +describe('hasCollectionConfiguration', () => { + it('is false for an empty collection', () => { + expect(hasCollectionConfiguration()).toBe(false); + expect(hasCollectionConfiguration([], undefined, {})).toBe(false); + }); + + it('ignores disabled or nameless headers', () => { + expect(hasCollectionConfiguration([{ name: '', value: 'x' }])).toBe(false); + expect(hasCollectionConfiguration([{ name: 'Accept', value: 'json', disabled: true }])).toBe(false); + }); + + it('is true when an enabled, named header is present', () => { + expect(hasCollectionConfiguration([{ name: 'Accept', value: 'application/json' }])).toBe(true); + }); + + it('is true when auth is configured', () => { + expect(hasCollectionConfiguration([], { type: 'bearer', token: 't' })).toBe(true); + }); + + it('is true when any script is present', () => { + expect(hasCollectionConfiguration([], undefined, { preRequest: 'x' })).toBe(true); + expect(hasCollectionConfiguration([], undefined, { postResponse: 'y' })).toBe(true); + expect(hasCollectionConfiguration([], undefined, { tests: 'z' })).toBe(true); + }); +}); diff --git a/packages/oc-docs/src/utils/collectionConfiguration.ts b/packages/oc-docs/src/utils/collectionConfiguration.ts new file mode 100644 index 00000000..e51d0b16 --- /dev/null +++ b/packages/oc-docs/src/utils/collectionConfiguration.ts @@ -0,0 +1,23 @@ +import type { HttpRequestHeader } from '@opencollection/types/requests/http'; +import type { Auth } from '@opencollection/types/common/auth'; + +export interface CollectionScripts { + preRequest?: string; + postResponse?: string; + tests?: string; +} + +/** + * True when a collection exposes any shared request defaults worth showing: + * an enabled, named header, an auth scheme, or a pre-request / post-response / + * test script. Used by the Overview page to decide whether the + * "Collection Configuration" section should appear at all. + */ +export const hasCollectionConfiguration = ( + headers: HttpRequestHeader[] = [], + auth?: Auth, + scripts: CollectionScripts = {} +): boolean => + headers.some((header) => header && header.name && header.disabled !== true) || + Boolean(auth) || + Boolean(scripts.preRequest || scripts.postResponse || scripts.tests); diff --git a/packages/oc-docs/src/utils/collectionStats.spec.ts b/packages/oc-docs/src/utils/collectionStats.spec.ts new file mode 100644 index 00000000..191e9b72 --- /dev/null +++ b/packages/oc-docs/src/utils/collectionStats.spec.ts @@ -0,0 +1,52 @@ +import { describe, it, expect } from 'vitest'; +import type { OpenCollection } from '@opencollection/types'; +import type { Item as OpenCollectionItem } from '@opencollection/types/collection/item'; +import { countItems, getCollectionStats } from './collectionStats'; + +describe('countItems', () => { + it('counts requests and folders recursively at every depth', () => { + const items = [ + { + type: 'folder', + name: 'Auth', + items: [ + { info: { type: 'http' }, http: {} }, + { info: { type: 'http' }, http: {} } + ] + }, + { + type: 'folder', + name: 'Hotels', + items: [{ type: 'folder', name: 'Nested', items: [{ info: { type: 'http' }, http: {} }] }] + }, + { info: { type: 'http' }, http: {} } + ] as unknown as OpenCollectionItem[]; + + // Folders: Auth, Hotels, Nested -> 3. Requests: 2 + 1 + 1 -> 4. + expect(countItems(items)).toEqual({ requestCount: 4, folderCount: 3 }); + }); + + it('returns zero counts for empty/missing items', () => { + expect(countItems(undefined)).toEqual({ requestCount: 0, folderCount: 0 }); + expect(countItems([])).toEqual({ requestCount: 0, folderCount: 0 }); + }); +}); + +describe('getCollectionStats', () => { + it('includes the environment count from config', () => { + const collection = { + items: [{ info: { type: 'http' }, http: {} }], + config: { environments: [{ name: 'Dev' }, { name: 'Prod' }] } + } as unknown as OpenCollection; + + expect(getCollectionStats(collection)).toEqual({ + requestCount: 1, + folderCount: 0, + environmentCount: 2 + }); + }); + + it('handles a null collection', () => { + expect(getCollectionStats(null)).toEqual({ requestCount: 0, folderCount: 0, environmentCount: 0 }); + }); +}); diff --git a/packages/oc-docs/src/utils/collectionStats.ts b/packages/oc-docs/src/utils/collectionStats.ts new file mode 100644 index 00000000..742c09eb --- /dev/null +++ b/packages/oc-docs/src/utils/collectionStats.ts @@ -0,0 +1,45 @@ +import type { Item as OpenCollectionItem } from '@opencollection/types/collection/item'; +import type { OpenCollection } from '@opencollection/types'; +import { isFolder } from './schemaHelpers'; + +export interface CollectionStats { + requestCount: number; + folderCount: number; + environmentCount: number; +} + +/** + * Counts requests and folders in a collection's item tree, recursively at every depth. + * Folders are identified via `isFolder`; everything else is treated as a request. + */ +export const countItems = ( + items: OpenCollectionItem[] | undefined +): { requestCount: number; folderCount: number } => { + let requestCount = 0; + let folderCount = 0; + + const walk = (list: OpenCollectionItem[] | undefined): void => { + if (!list?.length) return; + for (const item of list) { + if (isFolder(item)) { + folderCount += 1; + walk((item as { items?: OpenCollectionItem[] }).items); + } else { + requestCount += 1; + } + } + }; + + walk(items); + return { requestCount, folderCount }; +}; + +/** Summarises a collection: request, folder and environment counts. */ +export const getCollectionStats = (collection: OpenCollection | null | undefined): CollectionStats => { + const { requestCount, folderCount } = countItems(collection?.items); + return { + requestCount, + folderCount, + environmentCount: collection?.config?.environments?.length ?? 0 + }; +}; diff --git a/packages/oc-docs/src/utils/common.spec.ts b/packages/oc-docs/src/utils/common.spec.ts new file mode 100644 index 00000000..ef9365ed --- /dev/null +++ b/packages/oc-docs/src/utils/common.spec.ts @@ -0,0 +1,35 @@ +import { describe, it, expect } from 'vitest'; +import { formatCollectionVersion, DEFAULT_COLLECTION_VERSION } from './common'; + +describe('formatCollectionVersion', () => { + it('pads numeric versions to a full major.minor.patch with a "v" prefix', () => { + expect(formatCollectionVersion('1')).toBe('v1.0.0'); + expect(formatCollectionVersion('2.1')).toBe('v2.1.0'); + expect(formatCollectionVersion('1.0.0')).toBe('v1.0.0'); + expect(formatCollectionVersion('3.4.5')).toBe('v3.4.5'); + }); + + it('does not double-prefix an existing "v"/"V"', () => { + expect(formatCollectionVersion('v2.1')).toBe('v2.1.0'); + expect(formatCollectionVersion('V3')).toBe('v3.0.0'); + }); + + it('coerces numbers to a normalised version', () => { + expect(formatCollectionVersion(1)).toBe('v1.0.0'); + }); + + it('keeps extra numeric segments without truncating', () => { + expect(formatCollectionVersion('1.2.3.4')).toBe('v1.2.3.4'); + }); + + it('shows non-numeric / pre-release versions as-is (only prefixed)', () => { + expect(formatCollectionVersion('1.0.0-beta')).toBe('v1.0.0-beta'); + }); + + it('falls back to the default when no version is set', () => { + expect(formatCollectionVersion(undefined)).toBe(DEFAULT_COLLECTION_VERSION); + expect(formatCollectionVersion(null)).toBe(DEFAULT_COLLECTION_VERSION); + expect(formatCollectionVersion('')).toBe(DEFAULT_COLLECTION_VERSION); + expect(formatCollectionVersion(' ')).toBe(DEFAULT_COLLECTION_VERSION); + }); +}); From 3eb91b6c5ffca17b0d8da3c03bf47328cbfb641d Mon Sep 17 00:00:00 2001 From: bruno-sachin Date: Wed, 17 Jun 2026 16:46:54 +0530 Subject: [PATCH 03/24] BRU-2571 Theme color changes --- packages/oc-docs/src/components/Code/StyledWrapper.ts | 2 +- .../src/components/EnvironmentSummaryItem/StyledWrapper.ts | 2 +- packages/oc-docs/src/components/SectionLabel/StyledWrapper.ts | 2 +- packages/oc-docs/src/components/Stat/StyledWrapper.ts | 2 +- packages/oc-docs/src/styles/index.css | 1 + 5 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/oc-docs/src/components/Code/StyledWrapper.ts b/packages/oc-docs/src/components/Code/StyledWrapper.ts index 891c17fa..b1e6b4c6 100644 --- a/packages/oc-docs/src/components/Code/StyledWrapper.ts +++ b/packages/oc-docs/src/components/Code/StyledWrapper.ts @@ -2,7 +2,7 @@ import styled from '@emotion/styled'; export const StyledWrapper = styled.div` background-color: var(--code-bg); - border: 1px solid #ebeef1; + border: 1px solid var(--oc-table-border); border-radius: 8px; /* The copy button owns its own look (see CopyButton); here we only place it diff --git a/packages/oc-docs/src/components/EnvironmentSummaryItem/StyledWrapper.ts b/packages/oc-docs/src/components/EnvironmentSummaryItem/StyledWrapper.ts index 49cf2234..7e42c80d 100644 --- a/packages/oc-docs/src/components/EnvironmentSummaryItem/StyledWrapper.ts +++ b/packages/oc-docs/src/components/EnvironmentSummaryItem/StyledWrapper.ts @@ -24,7 +24,7 @@ export const EnvironmentSummaryItemWrapper = styled.li` } .environment-summary-name { - color: var(--text-primary); + color: var(--oc-text); } .environment-summary-spacer { diff --git a/packages/oc-docs/src/components/SectionLabel/StyledWrapper.ts b/packages/oc-docs/src/components/SectionLabel/StyledWrapper.ts index 6a31a825..49c0dc3b 100644 --- a/packages/oc-docs/src/components/SectionLabel/StyledWrapper.ts +++ b/packages/oc-docs/src/components/SectionLabel/StyledWrapper.ts @@ -13,5 +13,5 @@ export const SectionLabelWrapper = styled.h2` line-height: 1; letter-spacing: 1.4px; text-transform: uppercase; - color: var(--text-tertiary); + color: var(--oc-colors-text-subtext1); `; diff --git a/packages/oc-docs/src/components/Stat/StyledWrapper.ts b/packages/oc-docs/src/components/Stat/StyledWrapper.ts index 34913407..55522625 100644 --- a/packages/oc-docs/src/components/Stat/StyledWrapper.ts +++ b/packages/oc-docs/src/components/Stat/StyledWrapper.ts @@ -20,6 +20,6 @@ export const StatWrapper = styled.div` font-size: 0.78125rem; line-height: 1; letter-spacing: normal; - color: var(--text-secondary); + color: var(--oc-colors-text-subtext0); } `; diff --git a/packages/oc-docs/src/styles/index.css b/packages/oc-docs/src/styles/index.css index c825a3a2..6f77e8e6 100644 --- a/packages/oc-docs/src/styles/index.css +++ b/packages/oc-docs/src/styles/index.css @@ -696,6 +696,7 @@ tr.themed-row:nth-child(even) { .markdown-documentation p { margin-bottom: 0.75rem !important; + color: var(--text-primary); } .markdown-documentation a { From 2a38ca51a17255e6f3c2695d21c2e0577d0539b8 Mon Sep 17 00:00:00 2001 From: bruno-sachin Date: Wed, 17 Jun 2026 17:07:26 +0530 Subject: [PATCH 04/24] BRU-2571 Theme color changes --- packages/oc-docs/src/components/EmptyState/StyledWrapper.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/oc-docs/src/components/EmptyState/StyledWrapper.ts b/packages/oc-docs/src/components/EmptyState/StyledWrapper.ts index 0331535c..9abeb44a 100644 --- a/packages/oc-docs/src/components/EmptyState/StyledWrapper.ts +++ b/packages/oc-docs/src/components/EmptyState/StyledWrapper.ts @@ -24,7 +24,7 @@ export const EmptyStateWrapper = styled.div` height: 3rem; margin-bottom: 1.25rem; border-radius: 50%; - background: var(--badge-bg); + background: var(--oc-border-border0); color: var(--text-tertiary); } From 20082120984a5bc1f28c107350893b0409af89d7 Mon Sep 17 00:00:00 2001 From: bruno-sachin Date: Wed, 17 Jun 2026 21:52:33 +0530 Subject: [PATCH 05/24] BRU-2571 E2E test case fix --- packages/oc-docs/e2e/examples.spec.ts | 11 ++++++++--- packages/oc-docs/e2e/requests.spec.ts | 20 +++++++++++++------- 2 files changed, 21 insertions(+), 10 deletions(-) diff --git a/packages/oc-docs/e2e/examples.spec.ts b/packages/oc-docs/e2e/examples.spec.ts index 3b417e36..653b4e4f 100644 --- a/packages/oc-docs/e2e/examples.spec.ts +++ b/packages/oc-docs/e2e/examples.spec.ts @@ -1,6 +1,11 @@ import { test, expect } from '@playwright/test'; -test.describe('Request/response examples', () => { +// Skipped: the BRU-2571 Overview revamp renders only the Overview at `/` and +// disabled the all-endpoints view in Docs.tsx, so `.examples-container` and the +// per-endpoint example tabs no longer exist on the page. Re-enable these specs +// (drop the `.skip`) once the endpoints view is restored or relocated. + +test.describe.skip('Request/response examples', () => { test.beforeEach(async ({ page }) => { await page.goto('/'); await page.waitForSelector('.examples-container'); @@ -56,7 +61,7 @@ test.describe('Request/response examples', () => { }); }); -test.describe('Multiple examples per request (tabs)', () => { +test.describe.skip('Multiple examples per request (tabs)', () => { test.beforeEach(async ({ page }) => { await page.goto('/'); await page.waitForSelector('.examples-container'); @@ -118,7 +123,7 @@ test.describe('Multiple examples per request (tabs)', () => { }); }); -test.describe('Body/Headers toggle within examples', () => { +test.describe.skip('Body/Headers toggle within examples', () => { test.beforeEach(async ({ page }) => { await page.goto('/'); await page.waitForSelector('.examples-container'); diff --git a/packages/oc-docs/e2e/requests.spec.ts b/packages/oc-docs/e2e/requests.spec.ts index 15e19bc7..78c5a11f 100644 --- a/packages/oc-docs/e2e/requests.spec.ts +++ b/packages/oc-docs/e2e/requests.spec.ts @@ -1,5 +1,11 @@ import { test, expect, type Page } from '@playwright/test'; +// Skipped: the BRU-2571 Overview revamp renders only the Overview at `/` and +// disabled the all-endpoints view in Docs.tsx, so `.endpoint-section` (and the +// method badges, headers, bodies, params, docs and code snippets nested in it) +// no longer exist on the page. Re-enable these specs (drop the `.skip`) once the +// endpoints view is restored or relocated. + /** * Helper to locate an endpoint section by its h1 title. * Using heading role avoids case-insensitive hasText matching @@ -11,7 +17,7 @@ function endpointSection(page: Page, name: string) { }); } -test.describe('HTTP method badges and URLs', () => { +test.describe.skip('HTTP method badges and URLs', () => { test.beforeEach(async ({ page }) => { await page.goto('/'); await page.waitForSelector('.endpoint-section'); @@ -49,7 +55,7 @@ test.describe('HTTP method badges and URLs', () => { }); }); -test.describe('Request headers table', () => { +test.describe.skip('Request headers table', () => { test.beforeEach(async ({ page }) => { await page.goto('/'); await page.waitForSelector('.endpoint-section'); @@ -84,7 +90,7 @@ test.describe('Request headers table', () => { }); }); -test.describe('Request body rendering', () => { +test.describe.skip('Request body rendering', () => { test.beforeEach(async ({ page }) => { await page.goto('/'); await page.waitForSelector('.endpoint-section'); @@ -157,7 +163,7 @@ test.describe('Request body rendering', () => { }); }); -test.describe('Query parameters table', () => { +test.describe.skip('Query parameters table', () => { test.beforeEach(async ({ page }) => { await page.goto('/'); await page.waitForSelector('.endpoint-section'); @@ -191,7 +197,7 @@ test.describe('Query parameters table', () => { }); }); -test.describe('Request documentation', () => { +test.describe.skip('Request documentation', () => { test.beforeEach(async ({ page }) => { await page.goto('/'); await page.waitForSelector('.endpoint-section'); @@ -230,7 +236,7 @@ test.describe('Request documentation', () => { }); }); -test.describe('Code snippets', () => { +test.describe.skip('Code snippets', () => { test.beforeEach(async ({ page }) => { await page.goto('/'); await page.waitForSelector('.endpoint-section'); @@ -263,7 +269,7 @@ test.describe('Code snippets', () => { }); }); -test.describe('Examples for new request types', () => { +test.describe.skip('Examples for new request types', () => { test.beforeEach(async ({ page }) => { await page.goto('/'); await page.waitForSelector('.examples-container'); From 10663ee2138041c4d76effcec2fe79e78c253687 Mon Sep 17 00:00:00 2001 From: bruno-sachin Date: Thu, 18 Jun 2026 11:58:48 +0530 Subject: [PATCH 06/24] BRU-2571 Overview revamp changes --- .../src/components/PageWrapper/StyledWrapper.ts | 11 +++++++++-- packages/oc-docs/src/pages/Overview/StyledWrapper.ts | 1 - packages/oc-docs/src/styles/index.css | 8 ++++++++ 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/packages/oc-docs/src/components/PageWrapper/StyledWrapper.ts b/packages/oc-docs/src/components/PageWrapper/StyledWrapper.ts index 16f5c5e1..a0c94166 100644 --- a/packages/oc-docs/src/components/PageWrapper/StyledWrapper.ts +++ b/packages/oc-docs/src/components/PageWrapper/StyledWrapper.ts @@ -1,9 +1,16 @@ import styled from '@emotion/styled'; /** - * Shared page padding: 15px top/bottom (0.9375rem), 48px left/right (3rem). - * Expressed in rems so it scales with the root font size. + * Shared page padding: 15px top/bottom (0.9375rem) with 56px (3.5rem) left/right + * gutters on desktop, tightened to 20px (1.25rem) on small screens so content + * stays readable without horizontal overflow. In rems so it scales with the + * root font size. Every page renders inside this, so the responsive gutters + * apply consistently across the app. */ export const PageWrapperContainer = styled.div` padding: 0.9375rem 3.5rem; + + @media (max-width: 768px) { + padding: 0.9375rem 1.25rem; + } `; diff --git a/packages/oc-docs/src/pages/Overview/StyledWrapper.ts b/packages/oc-docs/src/pages/Overview/StyledWrapper.ts index 5a253ca6..50997501 100644 --- a/packages/oc-docs/src/pages/Overview/StyledWrapper.ts +++ b/packages/oc-docs/src/pages/Overview/StyledWrapper.ts @@ -7,7 +7,6 @@ import styled from '@emotion/styled'; */ export const OverviewWrapper = styled.div` max-width: 1100px; - margin: 0 auto; color: var(--text-primary); padding-bottom: 2rem; border-bottom: 1px solid var(--border-color); diff --git a/packages/oc-docs/src/styles/index.css b/packages/oc-docs/src/styles/index.css index 6f77e8e6..f653bfae 100644 --- a/packages/oc-docs/src/styles/index.css +++ b/packages/oc-docs/src/styles/index.css @@ -154,6 +154,7 @@ html, body { .playground-content { flex: 1; + min-width: 0; overflow-y: auto; scroll-behavior: smooth; padding: 0; @@ -213,6 +214,13 @@ html, body { flex-direction: column; } + .playground-content { + flex: 1; + width: 100%; + min-width: 0; + overflow-x: hidden; + } + .mobile-tabs { display: flex; padding: 0.5rem; From 4742909a473f71d1f9b95c27e9f7a6b4c3f0f32d Mon Sep 17 00:00:00 2001 From: bruno-sachin Date: Thu, 18 Jun 2026 15:38:57 +0530 Subject: [PATCH 07/24] BRU-3571 Removed the border bottom line --- packages/oc-docs/src/pages/Overview/StyledWrapper.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/oc-docs/src/pages/Overview/StyledWrapper.ts b/packages/oc-docs/src/pages/Overview/StyledWrapper.ts index 50997501..8d369b07 100644 --- a/packages/oc-docs/src/pages/Overview/StyledWrapper.ts +++ b/packages/oc-docs/src/pages/Overview/StyledWrapper.ts @@ -9,7 +9,6 @@ export const OverviewWrapper = styled.div` max-width: 1100px; color: var(--text-primary); padding-bottom: 2rem; - border-bottom: 1px solid var(--border-color); .overview-headline { display: flex; From d6cd48b929b0d1fba92b9cc235588c98a23585ff Mon Sep 17 00:00:00 2001 From: bruno-sachin Date: Thu, 18 Jun 2026 18:24:48 +0530 Subject: [PATCH 08/24] BRU-3571 Overview test-id revamp changes --- packages/oc-docs/e2e/utils/index.ts | 2 +- packages/oc-docs/e2e/utils/locators.ts | 57 +++++++------- packages/oc-docs/src/components/Code/Code.tsx | 9 ++- .../CollectionConfiguration.tsx | 74 ++++++++++++------- .../CollectionStats/CollectionStats.tsx | 10 ++- .../src/components/CopyButton/CopyButton.tsx | 4 + .../src/components/EmptyState/EmptyState.tsx | 8 +- .../EnvironmentSummary/EnvironmentSummary.tsx | 10 ++- .../EnvironmentSummaryItem.tsx | 10 ++- .../src/components/Heading/Heading.tsx | 6 +- .../components/SecretValue/SecretValue.tsx | 11 ++- .../src/components/Section/Section.tsx | 6 +- .../components/SectionLabel/SectionLabel.tsx | 6 +- packages/oc-docs/src/components/Stat/Stat.tsx | 11 ++- .../src/components/SubHeading/SubHeading.tsx | 6 +- .../oc-docs/src/pages/Overview/Overview.tsx | 25 +++++-- 16 files changed, 162 insertions(+), 93 deletions(-) diff --git a/packages/oc-docs/e2e/utils/index.ts b/packages/oc-docs/e2e/utils/index.ts index c609b99c..fb540e0d 100644 --- a/packages/oc-docs/e2e/utils/index.ts +++ b/packages/oc-docs/e2e/utils/index.ts @@ -13,6 +13,6 @@ export * from './locators'; export const gotoOverview = async (page: Page): Promise => { await test.step('Open the docs and wait for the Overview to render', async () => { await page.goto('/'); - await page.locator('.oc-overview').waitFor({ state: 'visible' }); + await page.getByTestId('overview').waitFor({ state: 'visible' }); }); }; diff --git a/packages/oc-docs/e2e/utils/locators.ts b/packages/oc-docs/e2e/utils/locators.ts index 7bb17588..cab8f230 100644 --- a/packages/oc-docs/e2e/utils/locators.ts +++ b/packages/oc-docs/e2e/utils/locators.ts @@ -3,16 +3,16 @@ import type { Page } from '@playwright/test'; /** * Locators for the collection Overview page, grouped by UI area. * - * Mirrors the `buildCommonLocators` pattern from the bruno tests: a single - * builder returns thunks organised by section, so specs read declaratively and - * every selector lives in one place. Prefers semantic role/text queries and - * falls back to the components' own stable class hooks. + * Selection is driven by `data-testid` hooks set from the Overview composition root + * (so specs are decoupled from styling/markup churn). The only exceptions are the + * rendered-markdown internals (table, headings, strong/code/blockquote), which are + * generated HTML with no place for a test id and so are matched by role/tag/text. */ export const buildOverviewLocators = (page: Page) => { - const root = () => page.locator('.oc-overview'); - const stat = (label: string) => root().locator('.collection-stats .stat').filter({ hasText: label }); - const environment = (name: string) => root().locator('.environment-summary-item').filter({ hasText: name }); - const configuration = () => root().locator('.collection-configuration'); + const root = () => page.getByTestId('overview'); + const stat = (label: string) => page.getByTestId('overview-stat').filter({ hasText: label }); + const environment = (name: string) => page.getByTestId('overview-environment').filter({ hasText: name }); + const configuration = () => page.getByTestId('overview-config'); return { /** The Overview page root. */ @@ -20,50 +20,51 @@ export const buildOverviewLocators = (page: Page) => { /** Headline: version label + collection name. */ header: { - version: () => root().locator('.overview-version'), - title: () => root().locator('.overview-headline').getByRole('heading', { level: 1 }) + version: () => page.getByTestId('overview-version'), + title: () => page.getByTestId('overview-title') }, /** Stat counters (Requests / Folders / Environments). */ stats: { - all: () => root().locator('.collection-stats .stat'), + all: () => page.getByTestId('overview-stat'), item: stat, - value: (label: string) => stat(label).locator('.stat-value') + value: (label: string) => stat(label).getByTestId('overview-stat-value') }, /** An uppercase section heading (e.g. "Environments", "Collection Configuration"). */ - sectionLabel: (name: string) => root().getByRole('heading', { level: 2, name }), + sectionLabel: (name: string) => page.getByTestId('overview-section-label').filter({ hasText: name }), /** Environments list. */ environments: { - list: () => root().locator('.environment-summary'), - items: () => root().locator('.environment-summary-item'), + list: () => page.getByTestId('overview-environments'), + items: () => page.getByTestId('overview-environment'), item: environment, - variableCount: (name: string) => environment(name).locator('.environment-summary-vars') + variableCount: (name: string) => environment(name).getByTestId('overview-environment-vars') }, - /** Rendered markdown documentation. */ + /** Rendered markdown documentation (body internals matched by role/tag — generated HTML). */ docs: { - content: () => root().locator('.overview-markdown'), - heading: (name: string) => root().locator('.overview-markdown').getByRole('heading', { name }), - table: () => root().locator('.overview-markdown table') + content: () => page.getByTestId('overview-docs'), + heading: (name: string) => page.getByTestId('overview-docs').getByRole('heading', { name }), + table: () => page.getByTestId('overview-docs').getByRole('table') }, /** Collection configuration: headers, auth, scripts and tests. */ configuration: { root: configuration, - subHeading: (name: string) => configuration().getByRole('heading', { level: 3, name, exact: true }), - row: (key: string) => configuration().locator('.config-row').filter({ hasText: key }), - rowValue: (key: string) => configuration().locator('.config-row').filter({ hasText: key }).locator('.config-value-cell'), - emptyMessages: () => configuration().locator('.config-empty-message'), - copyButtons: () => configuration().locator('.copy-button'), - secret: () => configuration().locator('.secret-value-text'), - revealSecretButton: () => configuration().locator('.secret-value-toggle') + subHeading: (name: string) => configuration().getByTestId('overview-config-subheading').filter({ hasText: name }), + row: (key: string) => configuration().getByTestId('overview-config-row').filter({ hasText: key }), + rowValue: (key: string) => + configuration().getByTestId('overview-config-row').filter({ hasText: key }).getByTestId('overview-config-row-value'), + emptyMessages: () => configuration().getByTestId('overview-config-empty'), + copyButtons: () => configuration().getByTestId('overview-config-copy'), + secret: () => configuration().getByTestId('overview-config-secret-text'), + revealSecretButton: () => configuration().getByTestId('overview-config-secret-toggle') }, /** Dashed empty-state placeholders (shown when a whole section has no data). */ emptyState: { - headings: () => root().locator('.empty-state-heading') + headings: () => root().getByTestId('overview-empty-heading') } }; }; diff --git a/packages/oc-docs/src/components/Code/Code.tsx b/packages/oc-docs/src/components/Code/Code.tsx index a5b85a44..093cb21b 100644 --- a/packages/oc-docs/src/components/Code/Code.tsx +++ b/packages/oc-docs/src/components/Code/Code.tsx @@ -26,12 +26,14 @@ interface CodeProps { showLineNumbers?: boolean; /** Show the copy-to-clipboard button (read-only viewer). */ showCopy?: boolean; + /** Test hook (`data-testid`) applied to the copy button (read-only viewer). */ + copyTestId?: string; /** Editor height in editable mode. */ height?: string; className?: string; } -type CodeViewerProps = Pick; +type CodeViewerProps = Pick; /** * Read-only, Prism-highlighted code. Lightweight and SSR-safe (highlighting runs @@ -43,6 +45,7 @@ const CodeViewer: React.FC = ({ language = 'text', showLineNumbers = false, showCopy = true, + copyTestId, className }) => { const preRef = useRef(null); @@ -65,7 +68,7 @@ const CodeViewer: React.FC = ({ return (
    - {showCopy && } + {showCopy && } {showLineNumbers ? (
    @@ -97,6 +100,7 @@ export const Code: React.FC = ({ onChange, showLineNumbers = false, showCopy = true, + copyTestId, height = '200px', className }) => { @@ -114,6 +118,7 @@ export const Code: React.FC = ({ language={language} showLineNumbers={showLineNumbers} showCopy={showCopy} + copyTestId={copyTestId} className={className} /> ); diff --git a/packages/oc-docs/src/components/CollectionConfiguration/CollectionConfiguration.tsx b/packages/oc-docs/src/components/CollectionConfiguration/CollectionConfiguration.tsx index 9ae0c881..f80669b6 100644 --- a/packages/oc-docs/src/components/CollectionConfiguration/CollectionConfiguration.tsx +++ b/packages/oc-docs/src/components/CollectionConfiguration/CollectionConfiguration.tsx @@ -19,6 +19,11 @@ interface CollectionConfigurationProps { scripts?: CollectionScripts; /** Maps an auth `type` to a display label (e.g. basic -> "Basic Auth"); supplied by the host. */ authModeLabels?: Record; + /** + * Test hook (`data-testid`) base, set by the composition root. Sub-elements derive + * stable ids from it (`-row`, `-row-value`, `-subheading`, `-empty`, `-secret`, `-copy`). + */ + testId?: string; } const containsVariable = (value: string): boolean => value.includes('{{'); @@ -26,10 +31,10 @@ const containsVariable = (value: string): boolean => value.includes('{{'); const resolveAuthMode = (auth: Auth, labels: Record): string => auth === 'inherit' ? 'Inherit' : labels[auth.type] || auth.type; -const ConfigRow: React.FC<{ label: string; children: React.ReactNode }> = ({ label, children }) => ( -
    +const ConfigRow: React.FC<{ label: string; children: React.ReactNode; testId?: string }> = ({ label, children, testId }) => ( +
    {label}
    -
    {children}
    +
    {children}
    ); @@ -38,14 +43,19 @@ const PlainValue: React.FC<{ value: string }> = ({ value }) => ( ); /** Italic placeholder shown for a configuration subsection that has no items yet. */ -const EmptyMessage: React.FC<{ children: React.ReactNode }> = ({ children }) => ( -

    {children}

    +const EmptyMessage: React.FC<{ children: React.ReactNode; testId?: string }> = ({ children, testId }) => ( +

    {children}

    ); /** Read-only rows for the collection-level auth, derived from the auth `type`. */ -const AuthRows: React.FC<{ auth: Auth; labels: Record }> = ({ auth, labels }) => { +const AuthRows: React.FC<{ auth: Auth; labels: Record; rowTestId?: string; secretTestId?: string }> = ({ + auth, + labels, + rowTestId, + secretTestId +}) => { const rows: React.ReactNode[] = [ - + ]; if (auth !== 'inherit') { @@ -53,16 +63,16 @@ const AuthRows: React.FC<{ auth: Auth; labels: Record }> = ({ au case 'basic': case 'digest': case 'ntlm': - if (auth.username) rows.push(); - if (auth.password) rows.push(); + if (auth.username) rows.push(); + if (auth.password) rows.push(); break; case 'bearer': - if (auth.token) rows.push(); + if (auth.token) rows.push(); break; case 'apikey': - if (auth.key) rows.push(); - if (auth.value) rows.push(); - if (auth.placement) rows.push(); + if (auth.key) rows.push(); + if (auth.value) rows.push(); + if (auth.placement) rows.push(); break; default: break; @@ -81,7 +91,8 @@ export const CollectionConfiguration: React.FC = ( headers = [], auth, scripts = {}, - authModeLabels = {} + authModeLabels = {}, + testId }) => { const visibleHeaders = headers.filter((header) => header && header.name && header.disabled !== true); const hasScripts = Boolean(scripts.preRequest || scripts.postResponse); @@ -91,60 +102,67 @@ export const CollectionConfiguration: React.FC = ( return null; } + // Stable test hooks derived from the base testId (omitted entirely when unset). + const rowTestId = testId ? `${testId}-row` : undefined; + const subTestId = testId ? `${testId}-subheading` : undefined; + const emptyTestId = testId ? `${testId}-empty` : undefined; + const secretTestId = testId ? `${testId}-secret` : undefined; + const copyTestId = testId ? `${testId}-copy` : undefined; + return ( - +
    - Headers + Headers {visibleHeaders.length > 0 ? (
    {visibleHeaders.map((header, index) => ( - + ))}
    ) : ( - Add headers to inherit in all requests in the collection + Add headers to inherit in all requests in the collection )}
    - Auth + Auth {auth ? ( - + ) : ( - Add authentication to inherit in all requests in the collection + Add authentication to inherit in all requests in the collection )}
    - Script + Script {hasScripts ? ( <> {scripts.preRequest && (

    Pre-Request

    - +
    )} {scripts.postResponse && (

    Post-Response

    - +
    )} ) : ( - Add scripts to run for all requests in the collection + Add scripts to run for all requests in the collection )}
    - Tests + Tests {scripts.tests ? ( - + ) : ( - Add tests to run for all requests in the collection + Add tests to run for all requests in the collection )}
    diff --git a/packages/oc-docs/src/components/CollectionStats/CollectionStats.tsx b/packages/oc-docs/src/components/CollectionStats/CollectionStats.tsx index 0a3f332e..245f1ad8 100644 --- a/packages/oc-docs/src/components/CollectionStats/CollectionStats.tsx +++ b/packages/oc-docs/src/components/CollectionStats/CollectionStats.tsx @@ -5,16 +5,20 @@ import { CollectionStatsWrapper } from './StyledWrapper'; interface CollectionStatsProps { stats: StatItem[]; + /** Test hook (`data-testid`) for the row container. */ + testId?: string; + /** Test hook applied to every `Stat` (its value cell gets `${itemTestId}-value`). */ + itemTestId?: string; } /** * A row of labelled stats. Fully prop-driven (labels + values supplied by the host) * and composed from the atomic `Stat` component. */ -export const CollectionStats: React.FC = ({ stats }) => ( - +export const CollectionStats: React.FC = ({ stats, testId, itemTestId }) => ( + {stats.map((stat, index) => ( - + ))} ); diff --git a/packages/oc-docs/src/components/CopyButton/CopyButton.tsx b/packages/oc-docs/src/components/CopyButton/CopyButton.tsx index c8ef61bf..971bf75c 100644 --- a/packages/oc-docs/src/components/CopyButton/CopyButton.tsx +++ b/packages/oc-docs/src/components/CopyButton/CopyButton.tsx @@ -10,6 +10,8 @@ interface CopyButtonProps { copiedLabel?: string; /** How long (ms) the confirmation state persists. */ resetAfterMs?: number; + /** Test hook (`data-testid`); useful here since the accessible name flips on copy. */ + testId?: string; className?: string; } @@ -36,6 +38,7 @@ export const CopyButton: React.FC = ({ label = 'Copy', copiedLabel = 'Copied', resetAfterMs = 2000, + testId, className }) => { const [copied, setCopied] = useState(false); @@ -67,6 +70,7 @@ export const CopyButton: React.FC = ({ className={['copy-button', className].filter(Boolean).join(' ')} onClick={handleCopy} aria-label={copied ? copiedLabel : label} + data-testid={testId} > {copied ? : } diff --git a/packages/oc-docs/src/components/EmptyState/EmptyState.tsx b/packages/oc-docs/src/components/EmptyState/EmptyState.tsx index 13cc0e1c..2ae7e186 100644 --- a/packages/oc-docs/src/components/EmptyState/EmptyState.tsx +++ b/packages/oc-docs/src/components/EmptyState/EmptyState.tsx @@ -8,6 +8,8 @@ interface EmptyStateProps { heading: React.ReactNode; /** Supporting description shown beneath the heading. */ subheading: React.ReactNode; + /** Test hook (`data-testid`); the heading gets `${testId}-heading`. */ + testId?: string; className?: string; } @@ -16,12 +18,12 @@ interface EmptyStateProps { * circular icon badge, a heading and a subheading. Icon-agnostic and fully * prop-driven, so it can be reused for any empty section across pages. */ -export const EmptyState: React.FC = ({ icon, heading, subheading, className }) => ( - +export const EmptyState: React.FC = ({ icon, heading, subheading, testId, className }) => ( + -

    {heading}

    +

    {heading}

    {subheading}

     ); diff --git a/packages/oc-docs/src/components/EnvironmentSummary/EnvironmentSummary.tsx b/packages/oc-docs/src/components/EnvironmentSummary/EnvironmentSummary.tsx index 8cf3fbd2..14f65d0c 100644 --- a/packages/oc-docs/src/components/EnvironmentSummary/EnvironmentSummary.tsx +++ b/packages/oc-docs/src/components/EnvironmentSummary/EnvironmentSummary.tsx @@ -5,18 +5,22 @@ import { EnvironmentSummaryWrapper } from './StyledWrapper'; interface EnvironmentSummaryProps { environments: Environment[]; + /** Test hook (`data-testid`) for the list container. */ + testId?: string; + /** Test hook applied to every item (its var-count cell gets `${itemTestId}-vars`). */ + itemTestId?: string; } /** Read-only list of a collection's environments, composed from `EnvironmentSummaryItem`. */ -export const EnvironmentSummary: React.FC = ({ environments }) => { +export const EnvironmentSummary: React.FC = ({ environments, testId, itemTestId }) => { if (!environments.length) { return null; } return ( - + {environments.map((environment, index) => ( - + ))} ); diff --git a/packages/oc-docs/src/components/EnvironmentSummaryItem/EnvironmentSummaryItem.tsx b/packages/oc-docs/src/components/EnvironmentSummaryItem/EnvironmentSummaryItem.tsx index 30d80d7e..52ab8105 100644 --- a/packages/oc-docs/src/components/EnvironmentSummaryItem/EnvironmentSummaryItem.tsx +++ b/packages/oc-docs/src/components/EnvironmentSummaryItem/EnvironmentSummaryItem.tsx @@ -7,18 +7,22 @@ const formatVariableCount = (count: number): string => `${count} variable${count interface EnvironmentSummaryItemProps { environment: Environment; + /** Test hook (`data-testid`); the variable-count cell gets `${testId}-vars`. */ + testId?: string; } /** A single environment row: color dot, name, and variable count. Renders an `
  • `. */ -export const EnvironmentSummaryItem: React.FC = ({ environment }) => ( - +export const EnvironmentSummaryItem: React.FC = ({ environment, testId }) => ( + {environment.name} - {formatVariableCount(environment.variables?.length ?? 0)} + + {formatVariableCount(environment.variables?.length ?? 0)} + ); diff --git a/packages/oc-docs/src/components/Heading/Heading.tsx b/packages/oc-docs/src/components/Heading/Heading.tsx index 7043b558..7475fdda 100644 --- a/packages/oc-docs/src/components/Heading/Heading.tsx +++ b/packages/oc-docs/src/components/Heading/Heading.tsx @@ -7,6 +7,8 @@ interface HeadingProps { children: React.ReactNode; /** Semantic heading element to render (the visual style is the same). Defaults to "h1". */ as?: HeadingLevel; + /** Test hook (`data-testid`) for end-to-end tests; set by the composition root. */ + testId?: string; className?: string; } @@ -15,8 +17,8 @@ interface HeadingProps { * (Inter, Semi Bold 600, 20px, 100% line-height, -0.5px letter-spacing). * Use `as` to render the correct heading level for the document outline. */ -export const Heading: React.FC = ({ children, as = 'h1', className }) => ( - +export const Heading: React.FC = ({ children, as = 'h1', testId, className }) => ( + {children} ); diff --git a/packages/oc-docs/src/components/SecretValue/SecretValue.tsx b/packages/oc-docs/src/components/SecretValue/SecretValue.tsx index e8946ed8..c818b48e 100644 --- a/packages/oc-docs/src/components/SecretValue/SecretValue.tsx +++ b/packages/oc-docs/src/components/SecretValue/SecretValue.tsx @@ -6,6 +6,8 @@ export const SECRET_MASK = '•'.repeat(12); interface SecretValueProps { value: string; + /** Test hook (`data-testid`); the text gets `${testId}-text`, the toggle `${testId}-toggle`. */ + testId?: string; } const EyeIcon: React.FC<{ off?: boolean }> = ({ off }) => ( @@ -28,19 +30,22 @@ const EyeIcon: React.FC<{ off?: boolean }> = ({ off }) => ( * A masked, reveal-on-demand value (used for passwords/tokens in read-only config). * The masked form is a fixed length so the secret's true length is not exposed. */ -export const SecretValue: React.FC = ({ value }) => { +export const SecretValue: React.FC = ({ value, testId }) => { const [revealed, setRevealed] = useState(false); return ( - + {/* While masked, hide the placeholder dots from assistive tech so they aren't read out as "bullet" repeatedly; the toggle's label conveys it's hidden. */} - {revealed ? value : SECRET_MASK} + + {revealed ? value : SECRET_MASK} + - + ); }; diff --git a/packages/oc-docs/src/ui/SecretValue/StyledWrapper.ts b/packages/oc-docs/src/ui/SecretValue/StyledWrapper.ts index 66e6550f..0a704962 100644 --- a/packages/oc-docs/src/ui/SecretValue/StyledWrapper.ts +++ b/packages/oc-docs/src/ui/SecretValue/StyledWrapper.ts @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -export const SecretValueWrapper = styled.span` +export const StyledWrapper = styled.span` display: flex; align-items: center; justify-content: space-between; diff --git a/packages/oc-docs/src/ui/Section/StyledWrapper.ts b/packages/oc-docs/src/ui/Section/StyledWrapper.ts deleted file mode 100644 index 37ab8670..00000000 --- a/packages/oc-docs/src/ui/Section/StyledWrapper.ts +++ /dev/null @@ -1,7 +0,0 @@ -import styled from '@emotion/styled'; - -export const SectionWrapper = styled.section` - & + & { - margin-top: 2rem; - } -`; diff --git a/packages/oc-docs/src/ui/SectionLabel/SectionLabel.tsx b/packages/oc-docs/src/ui/SectionLabel/SectionLabel.tsx index 3b5de9f0..1866174e 100644 --- a/packages/oc-docs/src/ui/SectionLabel/SectionLabel.tsx +++ b/packages/oc-docs/src/ui/SectionLabel/SectionLabel.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { SectionLabelWrapper } from './StyledWrapper'; +import { StyledWrapper } from './StyledWrapper'; type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; @@ -11,9 +11,9 @@ interface SectionLabelProps { } export const SectionLabel: React.FC = ({ children, as = 'h2', testId, className }) => ( - + {children} - + ); export default SectionLabel; diff --git a/packages/oc-docs/src/ui/SectionLabel/StyledWrapper.ts b/packages/oc-docs/src/ui/SectionLabel/StyledWrapper.ts index b76db393..3ba00c11 100644 --- a/packages/oc-docs/src/ui/SectionLabel/StyledWrapper.ts +++ b/packages/oc-docs/src/ui/SectionLabel/StyledWrapper.ts @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -export const SectionLabelWrapper = styled.h2` +export const StyledWrapper = styled.h2` margin: 0 0 0.75rem 0; font-family: var(--font-sans); font-weight: 600; diff --git a/packages/oc-docs/src/components/SubHeading/StyledWrapper.ts b/packages/oc-docs/src/ui/SubHeading/StyledWrapper.ts similarity index 83% rename from packages/oc-docs/src/components/SubHeading/StyledWrapper.ts rename to packages/oc-docs/src/ui/SubHeading/StyledWrapper.ts index 87d21083..8857a9f6 100644 --- a/packages/oc-docs/src/components/SubHeading/StyledWrapper.ts +++ b/packages/oc-docs/src/ui/SubHeading/StyledWrapper.ts @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -export const SubHeadingWrapper = styled.h3` +export const StyledWrapper = styled.h3` margin: 0 0 0.625rem 0; font-family: var(--font-sans); font-weight: 600; diff --git a/packages/oc-docs/src/components/SubHeading/SubHeading.spec.tsx b/packages/oc-docs/src/ui/SubHeading/SubHeading.spec.tsx similarity index 100% rename from packages/oc-docs/src/components/SubHeading/SubHeading.spec.tsx rename to packages/oc-docs/src/ui/SubHeading/SubHeading.spec.tsx diff --git a/packages/oc-docs/src/components/SubHeading/SubHeading.tsx b/packages/oc-docs/src/ui/SubHeading/SubHeading.tsx similarity index 70% rename from packages/oc-docs/src/components/SubHeading/SubHeading.tsx rename to packages/oc-docs/src/ui/SubHeading/SubHeading.tsx index a0069a3b..7342be86 100644 --- a/packages/oc-docs/src/components/SubHeading/SubHeading.tsx +++ b/packages/oc-docs/src/ui/SubHeading/SubHeading.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { SubHeadingWrapper } from './StyledWrapper'; +import { StyledWrapper } from './StyledWrapper'; type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; @@ -11,9 +11,9 @@ interface SubHeadingProps { } export const SubHeading: React.FC = ({ children, as = 'h3', testId, className }) => ( - + {children} - + ); export default SubHeading; From 58a3dc72fcdb40119de4968537047b8e7d0e4cac Mon Sep 17 00:00:00 2001 From: bruno-sachin Date: Wed, 24 Jun 2026 18:57:47 +0530 Subject: [PATCH 21/24] Comments addressed --- ...=> collection-configuration.component..ts} | 0 ...onent.ts => collection-stats.component.ts} | 0 ...component.ts => environments.component.ts} | 0 ...ction.component.ts => header.component.ts} | 0 packages/oc-docs/e2e/pages/overview.page.ts | 8 +- packages/oc-docs/playwright.config.ts | 2 +- packages/oc-docs/src/components/Code/Code.tsx | 67 ++-------------- .../components/Code/CodeViewer/CodeViewer.tsx | 78 +++++++++++++++++++ .../Code/{ => CodeViewer}/StyledWrapper.ts | 9 +-- .../src/components/Code/CodeViewer/index.ts | 2 + .../CollectionConfiguration.tsx | 7 +- 11 files changed, 97 insertions(+), 76 deletions(-) rename packages/oc-docs/e2e/components/overview/{configuration-section.component.ts => collection-configuration.component..ts} (100%) rename packages/oc-docs/e2e/components/overview/{stats-section.component.ts => collection-stats.component.ts} (100%) rename packages/oc-docs/e2e/components/overview/{environments-section.component.ts => environments.component.ts} (100%) rename packages/oc-docs/e2e/components/overview/{header-section.component.ts => header.component.ts} (100%) create mode 100644 packages/oc-docs/src/components/Code/CodeViewer/CodeViewer.tsx rename packages/oc-docs/src/components/Code/{ => CodeViewer}/StyledWrapper.ts (88%) create mode 100644 packages/oc-docs/src/components/Code/CodeViewer/index.ts diff --git a/packages/oc-docs/e2e/components/overview/configuration-section.component.ts b/packages/oc-docs/e2e/components/overview/collection-configuration.component..ts similarity index 100% rename from packages/oc-docs/e2e/components/overview/configuration-section.component.ts rename to packages/oc-docs/e2e/components/overview/collection-configuration.component..ts diff --git a/packages/oc-docs/e2e/components/overview/stats-section.component.ts b/packages/oc-docs/e2e/components/overview/collection-stats.component.ts similarity index 100% rename from packages/oc-docs/e2e/components/overview/stats-section.component.ts rename to packages/oc-docs/e2e/components/overview/collection-stats.component.ts diff --git a/packages/oc-docs/e2e/components/overview/environments-section.component.ts b/packages/oc-docs/e2e/components/overview/environments.component.ts similarity index 100% rename from packages/oc-docs/e2e/components/overview/environments-section.component.ts rename to packages/oc-docs/e2e/components/overview/environments.component.ts diff --git a/packages/oc-docs/e2e/components/overview/header-section.component.ts b/packages/oc-docs/e2e/components/overview/header.component.ts similarity index 100% rename from packages/oc-docs/e2e/components/overview/header-section.component.ts rename to packages/oc-docs/e2e/components/overview/header.component.ts diff --git a/packages/oc-docs/e2e/pages/overview.page.ts b/packages/oc-docs/e2e/pages/overview.page.ts index a1e179ff..5ee8001a 100644 --- a/packages/oc-docs/e2e/pages/overview.page.ts +++ b/packages/oc-docs/e2e/pages/overview.page.ts @@ -1,10 +1,10 @@ import type { Locator } from '@playwright/test'; import { BasePage } from './base.page'; import { MarkdownComponent } from '../components/markdown.component'; -import { HeaderSection } from '../components/overview/header-section.component'; -import { StatsSection } from '../components/overview/stats-section.component'; -import { EnvironmentsSection } from '../components/overview/environments-section.component'; -import { ConfigurationSection } from '../components/overview/configuration-section.component'; +import { HeaderSection } from '../components/overview/header.component'; +import { StatsSection } from '../components/overview/collection-stats.component'; +import { EnvironmentsSection } from '../components/overview/environments.component'; +import { ConfigurationSection } from '../components/overview/collection-configuration.component.'; export class OverviewPage extends BasePage { readonly root = this.page.getByTestId('overview'); diff --git a/packages/oc-docs/playwright.config.ts b/packages/oc-docs/playwright.config.ts index 02942c61..0ddfd123 100644 --- a/packages/oc-docs/playwright.config.ts +++ b/packages/oc-docs/playwright.config.ts @@ -20,7 +20,7 @@ export default defineConfig({ projects: [ { name: 'chromium', - use: { ...devices['Desktop Chrome'] }, + use: { ...devices['Desktop Chrome'], channel: 'chrome' }, }, ], webServer: { diff --git a/packages/oc-docs/src/components/Code/Code.tsx b/packages/oc-docs/src/components/Code/Code.tsx index 547cd86a..aa564ab0 100644 --- a/packages/oc-docs/src/components/Code/Code.tsx +++ b/packages/oc-docs/src/components/Code/Code.tsx @@ -1,13 +1,5 @@ -import React, { Suspense, lazy, useEffect, useMemo, useRef } from 'react'; -import { CopyButton } from '../../ui/CopyButton/CopyButton'; -import { StyledWrapper } from './StyledWrapper'; - -import Prism from 'prismjs'; -import 'prismjs/components/prism-javascript'; -import 'prismjs/components/prism-bash'; -import 'prismjs/components/prism-python'; -import 'prismjs/components/prism-json'; -import 'prismjs/components/prism-xml-doc'; +import React, { Suspense, lazy } from 'react'; +import { CodeViewer } from './CodeViewer/CodeViewer'; const LazyCodeEditor = lazy(() => import('../../ui/CodeEditor/CodeEditor')); @@ -18,60 +10,11 @@ interface CodeProps { onChange?: (value: string) => void; showLineNumbers?: boolean; showCopy?: boolean; - copyTestId?: string; + testId?: string; height?: string; className?: string; } -type CodeViewerProps = Pick; - -const CodeViewer: React.FC = ({ - code = '', - language = 'text', - showLineNumbers = false, - showCopy = true, - copyTestId, - className -}) => { - const preRef = useRef(null); - - useEffect(() => { - if (preRef.current) { - Prism.highlightAllUnder(preRef.current); - } - }, [code, language]); - - const lineCount = useMemo(() => (code ? code.split('\n').length : 1), [code]); - - const wrapperClassName = ['code-content-wrapper overflow-hidden', className].filter(Boolean).join(' '); - const codeEl = ( - 
    -      {code}
-
    - ); - - return ( - -
    - {showCopy && } - - {showLineNumbers ? ( -
    - -
    {codeEl}
    -
    - ) : ( -
    {codeEl}
    - )} -
    -     - ); -}; - export const Code: React.FC = ({ code = '', language = 'text', @@ -79,7 +22,7 @@ export const Code: React.FC = ({ onChange, showLineNumbers = false, showCopy = true, - copyTestId, + testId, height = '200px', className }) => { @@ -97,7 +40,7 @@ export const Code: React.FC = ({ language={language} showLineNumbers={showLineNumbers} showCopy={showCopy} - copyTestId={copyTestId} + testId={testId} className={className} /> ); diff --git a/packages/oc-docs/src/components/Code/CodeViewer/CodeViewer.tsx b/packages/oc-docs/src/components/Code/CodeViewer/CodeViewer.tsx new file mode 100644 index 00000000..54535bb0 --- /dev/null +++ b/packages/oc-docs/src/components/Code/CodeViewer/CodeViewer.tsx @@ -0,0 +1,78 @@ +import React, { useEffect, useMemo, useRef } from 'react'; +import { CopyButton } from '../../../ui/CopyButton/CopyButton'; +import { StyledWrapper } from './StyledWrapper'; + +import Prism from 'prismjs'; +import 'prismjs/components/prism-javascript'; +import 'prismjs/components/prism-bash'; +import 'prismjs/components/prism-python'; +import 'prismjs/components/prism-json'; +import 'prismjs/components/prism-xml-doc'; + +export interface CodeViewerProps { + code?: string; + language?: string; + showLineNumbers?: boolean; + showCopy?: boolean; + testId?: string; + className?: string; +} + +const LineNumbers: React.FC<{ count: number }> = ({ count }) => ( + +); + +export const CodeViewer: React.FC = ({ + code = '', + language = 'text', + showLineNumbers = false, + showCopy = true, + testId, + className +}) => { + const preRef = useRef(null); + + useEffect(() => { + if (preRef.current) { + Prism.highlightAllUnder(preRef.current); + } + }, [code, language]); + + const lineCount = useMemo(() => (code ? code.split('\n').length : 1), [code]); + + const codeEl = ( + 
    +      {code}
+
    + ); + + return ( + +
    + {showCopy && ( + + )} + + {showLineNumbers ? ( +
    + +
    {codeEl}
    +
    + ) : ( +
    {codeEl}
    + )} +
    +     + ); +}; + +export default CodeViewer; diff --git a/packages/oc-docs/src/components/Code/StyledWrapper.ts b/packages/oc-docs/src/components/Code/CodeViewer/StyledWrapper.ts similarity index 88% rename from packages/oc-docs/src/components/Code/StyledWrapper.ts rename to packages/oc-docs/src/components/Code/CodeViewer/StyledWrapper.ts index 07f65acf..8ca2a8bd 100644 --- a/packages/oc-docs/src/components/Code/StyledWrapper.ts +++ b/packages/oc-docs/src/components/Code/CodeViewer/StyledWrapper.ts @@ -31,15 +31,14 @@ export const StyledWrapper = styled.div` .code-content::-webkit-scrollbar-track { background: transparent; } + /* Reuse the app-wide scrollbar token (theme-aware); same hover treatment as the + global scrollbar in index.css. */ .code-content::-webkit-scrollbar-thumb { - background-color: rgba(0, 0, 0, 0.1); + background-color: var(--oc-scrollbar-color); border-radius: 4px; } - .code-content:hover::-webkit-scrollbar-thumb { - background-color: rgba(0, 0, 0, 0.2); - } .code-content::-webkit-scrollbar-thumb:hover { - background-color: rgba(0, 0, 0, 0.3); + background-color: color-mix(in srgb, var(--oc-text) 20%, transparent); } .code-content pre { diff --git a/packages/oc-docs/src/components/Code/CodeViewer/index.ts b/packages/oc-docs/src/components/Code/CodeViewer/index.ts new file mode 100644 index 00000000..f2fd81e4 --- /dev/null +++ b/packages/oc-docs/src/components/Code/CodeViewer/index.ts @@ -0,0 +1,2 @@ +export { CodeViewer, default } from './CodeViewer'; +export type { CodeViewerProps } from './CodeViewer'; diff --git a/packages/oc-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.tsx b/packages/oc-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.tsx index 62c1564e..cb0387d7 100644 --- a/packages/oc-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.tsx +++ b/packages/oc-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.tsx @@ -93,7 +93,6 @@ export const CollectionConfiguration: React.FC = ( const rowTestId = `${testId}-row`; const subTestId = `${testId}-subheading`; const secretTestId = `${testId}-secret`; - const copyTestId = `${testId}-copy`; return ( @@ -128,13 +127,13 @@ export const CollectionConfiguration: React.FC = ( {scripts.preRequest && (

    Pre-Request

    - +
    )} {scripts.postResponse && (

    Post-Response

    - +
    )} @@ -146,7 +145,7 @@ export const CollectionConfiguration: React.FC = (
    Tests {scripts.tests ? ( - + ) : ( Add tests to run for all requests in the collection )} From 4d614fb0994f872f2b1b9ea5d62d7bb2b0db55ff Mon Sep 17 00:00:00 2001 From: bruno-sachin Date: Wed, 24 Jun 2026 19:00:45 +0530 Subject: [PATCH 22/24] Comments addressed --- packages/oc-docs/playwright.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/oc-docs/playwright.config.ts b/packages/oc-docs/playwright.config.ts index 0ddfd123..02942c61 100644 --- a/packages/oc-docs/playwright.config.ts +++ b/packages/oc-docs/playwright.config.ts @@ -20,7 +20,7 @@ export default defineConfig({ projects: [ { name: 'chromium', - use: { ...devices['Desktop Chrome'], channel: 'chrome' }, + use: { ...devices['Desktop Chrome'] }, }, ], webServer: { From 6dc8525ae2c948dc245260f7e7cc46ea5147bd10 Mon Sep 17 00:00:00 2001 From: bruno-sachin Date: Wed, 24 Jun 2026 19:54:38 +0530 Subject: [PATCH 23/24] Comments addressed --- .../oc-docs/src/{ui => components}/Heading/Heading.spec.tsx | 0 packages/oc-docs/src/{ui => components}/Heading/Heading.tsx | 0 .../oc-docs/src/{ui => components}/Heading/StyledWrapper.ts | 0 .../CollectionConfiguration.tsx | 2 +- .../src/{ui => components}/PageWrapper/PageWrapper.spec.tsx | 0 .../src/{ui => components}/PageWrapper/PageWrapper.tsx | 0 .../src/{ui => components}/PageWrapper/StyledWrapper.ts | 0 packages/oc-docs/src/components/Section/Section.tsx | 2 +- .../src/{ui => components}/SectionLabel/SectionLabel.spec.tsx | 0 .../src/{ui => components}/SectionLabel/SectionLabel.tsx | 0 .../src/{ui => components}/SectionLabel/StyledWrapper.ts | 0 .../src/{ui => components}/SubHeading/StyledWrapper.ts | 0 .../src/{ui => components}/SubHeading/SubHeading.spec.tsx | 0 .../oc-docs/src/{ui => components}/SubHeading/SubHeading.tsx | 0 packages/oc-docs/src/pages/Overview/Overview.tsx | 4 ++-- 15 files changed, 4 insertions(+), 4 deletions(-) rename packages/oc-docs/src/{ui => components}/Heading/Heading.spec.tsx (100%) rename packages/oc-docs/src/{ui => components}/Heading/Heading.tsx (100%) rename packages/oc-docs/src/{ui => components}/Heading/StyledWrapper.ts (100%) rename packages/oc-docs/src/{ui => components}/PageWrapper/PageWrapper.spec.tsx (100%) rename packages/oc-docs/src/{ui => components}/PageWrapper/PageWrapper.tsx (100%) rename packages/oc-docs/src/{ui => components}/PageWrapper/StyledWrapper.ts (100%) rename packages/oc-docs/src/{ui => components}/SectionLabel/SectionLabel.spec.tsx (100%) rename packages/oc-docs/src/{ui => components}/SectionLabel/SectionLabel.tsx (100%) rename packages/oc-docs/src/{ui => components}/SectionLabel/StyledWrapper.ts (100%) rename packages/oc-docs/src/{ui => components}/SubHeading/StyledWrapper.ts (100%) rename packages/oc-docs/src/{ui => components}/SubHeading/SubHeading.spec.tsx (100%) rename packages/oc-docs/src/{ui => components}/SubHeading/SubHeading.tsx (100%) diff --git a/packages/oc-docs/src/ui/Heading/Heading.spec.tsx b/packages/oc-docs/src/components/Heading/Heading.spec.tsx similarity index 100% rename from packages/oc-docs/src/ui/Heading/Heading.spec.tsx rename to packages/oc-docs/src/components/Heading/Heading.spec.tsx diff --git a/packages/oc-docs/src/ui/Heading/Heading.tsx b/packages/oc-docs/src/components/Heading/Heading.tsx similarity index 100% rename from packages/oc-docs/src/ui/Heading/Heading.tsx rename to packages/oc-docs/src/components/Heading/Heading.tsx diff --git a/packages/oc-docs/src/ui/Heading/StyledWrapper.ts b/packages/oc-docs/src/components/Heading/StyledWrapper.ts similarity index 100% rename from packages/oc-docs/src/ui/Heading/StyledWrapper.ts rename to packages/oc-docs/src/components/Heading/StyledWrapper.ts diff --git a/packages/oc-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.tsx b/packages/oc-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.tsx index cb0387d7..d294b058 100644 --- a/packages/oc-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.tsx +++ b/packages/oc-docs/src/components/OverviewCollectionConfiguration/CollectionConfiguration.tsx @@ -3,7 +3,7 @@ import type { HttpRequestHeader } from '@opencollection/types/requests/http'; import type { Auth } from '@opencollection/types/common/auth'; import { Code } from '../Code/Code'; import { SecretValue } from '../../ui/SecretValue/SecretValue'; -import { SubHeading } from '../../ui/SubHeading/SubHeading'; +import { SubHeading } from '../SubHeading/SubHeading'; import { StyledWrapper } from './StyledWrapper'; interface CollectionScripts { diff --git a/packages/oc-docs/src/ui/PageWrapper/PageWrapper.spec.tsx b/packages/oc-docs/src/components/PageWrapper/PageWrapper.spec.tsx similarity index 100% rename from packages/oc-docs/src/ui/PageWrapper/PageWrapper.spec.tsx rename to packages/oc-docs/src/components/PageWrapper/PageWrapper.spec.tsx diff --git a/packages/oc-docs/src/ui/PageWrapper/PageWrapper.tsx b/packages/oc-docs/src/components/PageWrapper/PageWrapper.tsx similarity index 100% rename from packages/oc-docs/src/ui/PageWrapper/PageWrapper.tsx rename to packages/oc-docs/src/components/PageWrapper/PageWrapper.tsx diff --git a/packages/oc-docs/src/ui/PageWrapper/StyledWrapper.ts b/packages/oc-docs/src/components/PageWrapper/StyledWrapper.ts similarity index 100% rename from packages/oc-docs/src/ui/PageWrapper/StyledWrapper.ts rename to packages/oc-docs/src/components/PageWrapper/StyledWrapper.ts diff --git a/packages/oc-docs/src/components/Section/Section.tsx b/packages/oc-docs/src/components/Section/Section.tsx index ef6703a6..db357705 100644 --- a/packages/oc-docs/src/components/Section/Section.tsx +++ b/packages/oc-docs/src/components/Section/Section.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { SectionLabel } from '../../ui/SectionLabel/SectionLabel' +import { SectionLabel } from '../SectionLabel/SectionLabel' import { StyledWrapper } from './StyledWrapper'; interface SectionProps { diff --git a/packages/oc-docs/src/ui/SectionLabel/SectionLabel.spec.tsx b/packages/oc-docs/src/components/SectionLabel/SectionLabel.spec.tsx similarity index 100% rename from packages/oc-docs/src/ui/SectionLabel/SectionLabel.spec.tsx rename to packages/oc-docs/src/components/SectionLabel/SectionLabel.spec.tsx diff --git a/packages/oc-docs/src/ui/SectionLabel/SectionLabel.tsx b/packages/oc-docs/src/components/SectionLabel/SectionLabel.tsx similarity index 100% rename from packages/oc-docs/src/ui/SectionLabel/SectionLabel.tsx rename to packages/oc-docs/src/components/SectionLabel/SectionLabel.tsx diff --git a/packages/oc-docs/src/ui/SectionLabel/StyledWrapper.ts b/packages/oc-docs/src/components/SectionLabel/StyledWrapper.ts similarity index 100% rename from packages/oc-docs/src/ui/SectionLabel/StyledWrapper.ts rename to packages/oc-docs/src/components/SectionLabel/StyledWrapper.ts diff --git a/packages/oc-docs/src/ui/SubHeading/StyledWrapper.ts b/packages/oc-docs/src/components/SubHeading/StyledWrapper.ts similarity index 100% rename from packages/oc-docs/src/ui/SubHeading/StyledWrapper.ts rename to packages/oc-docs/src/components/SubHeading/StyledWrapper.ts diff --git a/packages/oc-docs/src/ui/SubHeading/SubHeading.spec.tsx b/packages/oc-docs/src/components/SubHeading/SubHeading.spec.tsx similarity index 100% rename from packages/oc-docs/src/ui/SubHeading/SubHeading.spec.tsx rename to packages/oc-docs/src/components/SubHeading/SubHeading.spec.tsx diff --git a/packages/oc-docs/src/ui/SubHeading/SubHeading.tsx b/packages/oc-docs/src/components/SubHeading/SubHeading.tsx similarity index 100% rename from packages/oc-docs/src/ui/SubHeading/SubHeading.tsx rename to packages/oc-docs/src/components/SubHeading/SubHeading.tsx diff --git a/packages/oc-docs/src/pages/Overview/Overview.tsx b/packages/oc-docs/src/pages/Overview/Overview.tsx index 9f9ad4d5..95d272bd 100644 --- a/packages/oc-docs/src/pages/Overview/Overview.tsx +++ b/packages/oc-docs/src/pages/Overview/Overview.tsx @@ -11,8 +11,8 @@ import { CollectionStats } from '../../components/CollectionStats/CollectionStat import { EnvironmentSummary } from '../../components/OverviewEnvironments/EnvironmentSummary/EnvironmentSummary'; import { CollectionConfiguration } from '../../components/OverviewCollectionConfiguration/CollectionConfiguration'; import { EmptyState } from '../../ui/EmptyState/EmptyState'; -import { PageWrapper } from '../../ui/PageWrapper/PageWrapper'; -import { Heading } from '../../ui/Heading/Heading'; +import { PageWrapper } from '../../components/PageWrapper/PageWrapper'; +import { Heading } from '../../components/Heading/Heading'; import { Section } from '../../components/Section/Section'; import { GlobeIcon, BookIcon } from '../../assets/icons'; import { StyledWrapper } from './StyledWrapper'; From 9cae7a4ec2d5e168f3d13cf0aed0a0e54d6e1648 Mon Sep 17 00:00:00 2001 From: bruno-sachin Date: Thu, 25 Jun 2026 11:53:55 +0530 Subject: [PATCH 24/24] BRU-3571 Removed the index page & Comments addressed --- packages/oc-docs/src/components/Code/CodeViewer/index.ts | 2 -- 1 file changed, 2 deletions(-) delete mode 100644 packages/oc-docs/src/components/Code/CodeViewer/index.ts diff --git a/packages/oc-docs/src/components/Code/CodeViewer/index.ts b/packages/oc-docs/src/components/Code/CodeViewer/index.ts deleted file mode 100644 index f2fd81e4..00000000 --- a/packages/oc-docs/src/components/Code/CodeViewer/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { CodeViewer, default } from './CodeViewer'; -export type { CodeViewerProps } from './CodeViewer';