From bb0c88d45f747ab1dadde686492e80445ba23c39 Mon Sep 17 00:00:00 2001 From: Andrea Pregnolato Date: Fri, 11 Oct 2024 15:29:05 +0200 Subject: [PATCH] feat: unify header structure (#278) --- .../3-components/2-library/16-header.mdx | 682 ++++++++++++++++++ .../3-components/2-library/5-button.mdx | 2 +- apps/docs/package.json | 2 + apps/docs/src/components/chrome/top-bar.tsx | 9 +- .../src/components/document/common/mdx.tsx | 29 +- .../document/common/wrap-components.tsx | 8 + packages/design/tailwind/css/components.css | 116 +++ .../src/header/components/headerDesktop.html | 114 --- .../ds/src/header/components/headerMenu.html | 9 +- .../components/headerSearchContainer.html | 19 +- .../ds/src/header/components/headerSmall.html | 123 ---- packages/html/ds/src/header/header.html | 130 +++- packages/html/ds/src/header/header.schema.ts | 12 - packages/html/ds/src/header/header.stories.ts | 62 +- packages/html/ds/src/header/header.test.ts | 25 +- packages/html/ds/styles.css | 32 - .../react/ds/src/header/header.stories.tsx | 7 + packages/react/ds/src/header/header.tsx | 242 +++---- packages/react/ds/styles.css | 66 -- pnpm-lock.yaml | 151 ++++ 20 files changed, 1256 insertions(+), 584 deletions(-) delete mode 100644 packages/html/ds/src/header/components/headerDesktop.html delete mode 100644 packages/html/ds/src/header/components/headerSmall.html diff --git a/apps/docs/content/3-components/2-library/16-header.mdx b/apps/docs/content/3-components/2-library/16-header.mdx index 50b44b561..bc41edf1f 100644 --- a/apps/docs/content/3-components/2-library/16-header.mdx +++ b/apps/docs/content/3-components/2-library/16-header.mdx @@ -11,6 +11,688 @@ The GOV.IE header component tells users they’re using a service on GOV.IE and +
+ + + + HTML + Macro + React + + + ```html +
+ + + +
+
+
+ +
+ + +
+
+
+
+ +
+
+
+ +
+
+ +
+
+
+ + ``` + + + ```html + {{ govieHeader({ + "title":"Application title" + "languages":[{ "href": "#", "label": "Gaeilge" }] + "navLinks":[{ "href": "#", "label": "News" },{ "href": "#", "label": "Departments" },{ "href": "#", "label": "Services" }] + "tools":{ + "search": { + "label": "Search", + "action": "/search-page", + }, + "items": [ + { + "href": "/item1", + "label": "Home", + "icon": "home", + }, + ], + "menu": { + "label": "Menu" + } + } + }) + }} + ``` + + + ```html + import { Header } from '@govie-ds/react'; + +
+ ``` + + + +## Header with title + +
+ + + + HTML + Macro + React + + + ```html +
+ +
+ + ``` + + + ```html + {{ govieHeader({"title": "Application title"}) }} + ``` + + + ```html + import { Header } from '@govie-ds/react'; + +
+ ``` + + + +## Header with links + +
+ + + + HTML + Macro + React + + + ```html +
+ +
+ + ``` + + + ```html + {{ govieHeader({ + "navLinks": [ + { + "href": "#", + "label": "News" + }, + { + "href": "#", + "label": "Departments" + }, + { + "href": "#", + "label": "Services" + } + ]}) + }} + ``` + + + ```html + import { Header } from '@govie-ds/react'; + +
+ ``` + + + +## Header with language switch + +
+ + + + HTML + Macro + React + + + ```html +
+ + + +
+ ``` + + + ```html + {{ govieHeader({ + "languages": [ + { + "href": "#", + "label": "Gaeilge" + } + ]}) + }} + ``` + + + ```html + import { Header } from '@govie-ds/react'; + +
+ ``` + + + +## Header with tools + +
+ + + + HTML + Macro + React + + + ```html +
+ +
+
+
+ +
+ + +
+
+
+
+ +
+
+
+ +
+
+ +
+
+
+ + ``` + + + ```html + {{ govieHeader( + tools:{ + search: { + label: 'Search' + action: '/search-page', + }, + items: [ + { + href: '/item1', + label: 'Home', + icon: 'home', + }, + ], + menu: { + label: 'Menu' + } + }) + }} + ``` + + + ```react + import { Header } from '@govie-ds/react'; + +
+ ``` + + + ## When to use this component You must use the GOV.IE header component at the top of every page. The Service Manual explains why it’s important for you to make your service look like GOV.IE. diff --git a/apps/docs/content/3-components/2-library/5-button.mdx b/apps/docs/content/3-components/2-library/5-button.mdx index 22240dd31..8cf512153 100644 --- a/apps/docs/content/3-components/2-library/5-button.mdx +++ b/apps/docs/content/3-components/2-library/5-button.mdx @@ -32,7 +32,7 @@ status: stable ``` - ```html + ```react import { Button } from '@govie-ds/react'; diff --git a/apps/docs/package.json b/apps/docs/package.json index 70ec7ebe5..b34069695 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -45,6 +45,7 @@ "re-resizable": "^6.9.17", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-syntax-highlighter": "^15.5.0", "react-use": "^17.5.1", "sharp": "^0.33.4", "spellchecker-cli": "^6.2.0", @@ -73,6 +74,7 @@ "@types/node": "^20.14.14", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", + "@types/react-syntax-highlighter": "^15.5.13", "cross-env": "^7.0.3", "eslint": "^9.8.0", "eslint-plugin-storybook": "^0.8.0", diff --git a/apps/docs/src/components/chrome/top-bar.tsx b/apps/docs/src/components/chrome/top-bar.tsx index 0d4bf4ffd..5c72a91c6 100644 --- a/apps/docs/src/components/chrome/top-bar.tsx +++ b/apps/docs/src/components/chrome/top-bar.tsx @@ -1,21 +1,16 @@ 'use client'; -import { usePathname } from 'next/navigation'; +import { Header } from '@govie-ds/react'; import { useState } from 'react'; import { MainMenuConnected } from '../navigation/main-menu-connected'; import { MobileMenuConnected } from '../navigation/mobile-menu-connected'; -import { Header } from './header'; export function TopBar() { const [isOpen, setIsOpen] = useState(false); - const pathname = usePathname(); // TODO: review showing main menu on the home page return (
-
setIsOpen((isOpen) => !isOpen)} - /> +
{children} : null, ul: ({ children }) =>
    {children}
, li: ({ children }) =>
  • {children}
    • , - code: ({ children, className }) => ( - - {children} - - ), + code: ({ children, className }) => + className ? ( + + {children as string | string[]} + + ) : ( + + {children} + + ), blockquote: ({ children }) => {children}, }; @@ -140,6 +144,7 @@ const documentComponents: MDXComponents = { Button: (props) => - {% endif %} -
    - - {% if props.tools.search %} - {{ HeaderSearchContainer({ "searchUrl": props.tools.search.action, "dataElement": "search-container", "dataTestId": "search-container-desktop" }) }} - {% endif %} - -{% endmacro %} diff --git a/packages/html/ds/src/header/components/headerMenu.html b/packages/html/ds/src/header/components/headerMenu.html index 49e62d14b..e1cc577f6 100644 --- a/packages/html/ds/src/header/components/headerMenu.html +++ b/packages/html/ds/src/header/components/headerMenu.html @@ -2,7 +2,7 @@ {% from 'icon/icon.html' import govieIcon %} {% macro headerMenu(props) %}
    -
    -
    - {{ HeaderSearchContainer({"searchUrl": props.tools.search.action, "dataElement": "search-container-small","dataTestId": "search-container-tablet"}) }} -
    - {{ headerMenu(props) }} -
    - -{% endmacro %} diff --git a/packages/html/ds/src/header/header.html b/packages/html/ds/src/header/header.html index 81670858c..9d143e68c 100644 --- a/packages/html/ds/src/header/header.html +++ b/packages/html/ds/src/header/header.html @@ -1,9 +1,129 @@ -{% from 'header/components/headerDesktop.html' import govieHeaderDesktop %} -{% from 'header/components/headerSmall.html' import govieHeaderSmall %} +{% from "header/assets/logo.html" import govieLogo %} +{% from 'header/assets/logoSmall.html' import govieLogoSmall %} +{% from 'icon/icon.html' import govieIcon %} +{% from 'header/assets/logo.html' import govieLogo %} +{% from 'header/components/headerSearchContainer.html' import HeaderSearchContainer %} +{% from 'header/components/headerMenu.html' import headerMenu %} {% macro govieHeader(props) %} -
    - {{ govieHeaderDesktop(props) }} - {{ govieHeaderSmall(props) }} + {% set headerClassNames = "gi-header" %} + {% set languageBarClassNames ="gi-header-language-bar" %} + {% set languageItemClassNames ="gi-header-language-item" %} + {% set menuContainerClassNames ="gi-header-menu" %} + {% set logoLargeClassNames = "gi-header-logo-lg" %} + {% set logoSmallClassNames = "gi-header-logo-sm" %} + {% set appTitleClassNames = "gi-header-title" %} + {% set toolItemClassNames ="gi-header-tool-item" %} + {% set navLinkContainerClassNames = "gi-header-nav" %} + {% set menuDividerClassNames = "gi-header-separator" %} + {% set overlayClassNames = "gi-header-overlay" %} + +
    + {% if props.languages %} + + {% endif %} + + + {% if props.tools.search %} + {{ HeaderSearchContainer({"searchUrl": props.tools.search.action}) }} + {% endif %} + {{ headerMenu(props) }} +
    {% endmacro %} diff --git a/packages/html/ds/src/header/header.schema.ts b/packages/html/ds/src/header/header.schema.ts index 864ffe154..8f4fd9917 100644 --- a/packages/html/ds/src/header/header.schema.ts +++ b/packages/html/ds/src/header/header.schema.ts @@ -41,12 +41,6 @@ export const headerSchema = zod.object({ description: 'The search icon, default is icon "search"', }) .optional(), - noJsSearchLink: zod - .string({ - description: - 'The link of the search page when there is no Javascript enabled', - }) - .optional(), }) .describe('Search tool options') .optional(), @@ -62,12 +56,6 @@ export const headerSchema = zod.object({ description: 'The menu icon, default is icon "icon-hamburger"', }) .optional(), - noJsMenuLink: zod - .string({ - description: - 'The link of the menu page when there is no Javascript enabled', - }) - .optional(), }) .describe('Menu tool options') .optional(), diff --git a/packages/html/ds/src/header/header.stories.ts b/packages/html/ds/src/header/header.stories.ts index 9fb61bde6..63e0f3e28 100644 --- a/packages/html/ds/src/header/header.stories.ts +++ b/packages/html/ds/src/header/header.stories.ts @@ -33,17 +33,9 @@ export const Default: Story = { action: { description: 'The url for the search page', }, - noJsSearchLink: { - description: - 'Fallback link for the search button if there is no JS enabled on page', - }, - }, - menu: { - noJsMenuLink: { - description: - 'Fallback link for the menu button if there is no JS enabled on page', - }, }, + items: [], + menu: {}, }, navLinks: { description: 'A list of navigation links', @@ -58,11 +50,16 @@ export const Default: Story = { search: { action: '/search_page', label: 'Search', - noJsSearchLink: '/search', }, + items: [ + { + href: '/item1', + label: 'Apps', + icon: 'apps', + }, + ], menu: { label: 'Menu', - noJsMenuLink: '/menu', }, }, navLinks: [ @@ -105,11 +102,9 @@ export const WithMainLinks: Story = { search: { action: '/search_page', label: 'Search', - noJsSearchLink: '/search', }, menu: { label: 'Menu', - noJsMenuLink: '/menu', }, }, navLinks: [ @@ -133,9 +128,7 @@ export const WithNoSearch: Story = { args: { logo: { href: '/home' }, tools: { - menu: { - noJsMenuLink: '/menu', - }, + menu: {}, }, navLinks: [ { @@ -158,10 +151,8 @@ export const WithLanguage: Story = { args: { logo: { href: '/home' }, tools: { - search: { action: '/search_page', noJsSearchLink: '/search' }, - menu: { - noJsMenuLink: '/menu', - }, + search: { action: '/search_page' }, + menu: {}, }, languages: [ { @@ -176,10 +167,8 @@ export const withMainAndLanguageLinks: Story = { args: { logo: { href: '/home' }, tools: { - search: { action: '/search_page', noJsSearchLink: '/search' }, - menu: { - noJsMenuLink: '/menu', - }, + search: { action: '/search_page' }, + menu: {}, }, navLinks: [ { @@ -213,10 +202,8 @@ export const tabletView: Story = { args: { logo: { href: '/home' }, tools: { - search: { action: '/search_page', noJsSearchLink: '/search' }, - menu: { - noJsMenuLink: '/menu', - }, + search: { action: '/search_page' }, + menu: {}, }, navLinks: [ { @@ -250,10 +237,8 @@ export const mobileView: Story = { args: { logo: { href: '/home' }, tools: { - search: { action: '/search_page', noJsSearchLink: '/search' }, - menu: { - noJsMenuLink: '/menu', - }, + search: { action: '/search_page' }, + menu: {}, }, navLinks: [ { @@ -283,10 +268,8 @@ export const withTitle: Story = { title: 'Life Events', logo: { href: '/home' }, tools: { - search: { action: '/search_page', noJsSearchLink: '/search' }, - menu: { - noJsMenuLink: '/menu', - }, + search: { action: '/search_page' }, + menu: {}, }, navLinks: [ { @@ -313,11 +296,8 @@ export const WithNoLabels: Story = { tools: { search: { action: '/search_page', - noJsSearchLink: '/search', - }, - menu: { - noJsMenuLink: '/menu', }, + menu: {}, }, navLinks: [ { diff --git a/packages/html/ds/src/header/header.test.ts b/packages/html/ds/src/header/header.test.ts index 1835912cb..06fbf12d7 100644 --- a/packages/html/ds/src/header/header.test.ts +++ b/packages/html/ds/src/header/header.test.ts @@ -7,10 +7,10 @@ const standardProps = { tools: { search: { action: '/search_page', - noJsSearchLink: '/search', + label: 'Search', }, menu: { - noJsMenuLink: '/menu', + label: 'Menu', }, }, navLinks: [ @@ -47,12 +47,10 @@ describe('header', () => { logo: { href: '/home' }, tools: { search: { + label: 'Search', action: '/search_page', - noJsSearchLink: '/search', - }, - menu: { - noJsMenuLink: '/menu', }, + menu: {}, }, navLinks: [ { @@ -100,20 +98,7 @@ describe('header', () => { it('should show the search button', () => { const screen = renderHeader(standardProps); - const searchElement = screen.getByTestId('search-container-desktop'); + const searchElement = screen.getByTestId('SearchTrigger'); expect(searchElement).toBeTruthy(); }); - - it('should show the search container on click', async () => { - const screen = renderHeader(standardProps); - - const searchElement = screen.getByTestId('search-desktop-button'); - const searchContainerElement = screen.getByTestId( - 'search-container-desktop', - ); - - expect(searchContainerElement.classList.contains('xs:gi-h-0')).toBe(true); - searchElement.click(); - expect(searchContainerElement.classList.contains('xs:gi-h-40')).toBe(true); - }); }); diff --git a/packages/html/ds/styles.css b/packages/html/ds/styles.css index 855f9b908..4172fb109 100644 --- a/packages/html/ds/styles.css +++ b/packages/html/ds/styles.css @@ -26,35 +26,3 @@ } } -@layer components { - /* Tabs */ - - .tab-item:checked+label { - @apply gi-border-solid gi-border-gray-200 gi-border-x-xs gi-border-t-xs gi-border-b-0 gi-bg-white gi-px-5 gi-py-3 gi--mt-2 gi-no-underline - } - - .tab-item:hover+label>* { - @apply gi-decoration-lg - } - - .tab-item:focus+label>* { - @apply gi-outline gi-outline-transparent gi-bg-yellow-400 gi-outline-2 gi-shadow gi-shadow-yellow-400 - } - - div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(1):checked) [role="tabpanel"]:nth-of-type(2), - div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(2):checked) [role="tabpanel"]:nth-of-type(3), - div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(3):checked) [role="tabpanel"]:nth-of-type(4), - div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(4):checked) [role="tabpanel"]:nth-of-type(5), - div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(5):checked) [role="tabpanel"]:nth-of-type(6), - div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(6):checked) [role="tabpanel"]:nth-of-type(7), - div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(7):checked) [role="tabpanel"]:nth-of-type(8), - div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(8):checked) [role="tabpanel"]:nth-of-type(9), - div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(9):checked) [role="tabpanel"]:nth-of-type(10), - div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(10):checked) [role="tabpanel"]:nth-of-type(11), - div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(11):checked) [role="tabpanel"]:nth-of-type(12), - div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(12):checked) [role="tabpanel"]:nth-of-type(13) { - display: block; - } - - /* End Tabs */ -} \ No newline at end of file diff --git a/packages/react/ds/src/header/header.stories.tsx b/packages/react/ds/src/header/header.stories.tsx index b6b7205eb..85497b5e8 100644 --- a/packages/react/ds/src/header/header.stories.tsx +++ b/packages/react/ds/src/header/header.stories.tsx @@ -85,6 +85,13 @@ export const Default: Story = { action: '/search_page', label: 'Search', }, + items: [ + { + href: '/item1', + label: 'Home', + icon: 'home', + }, + ], }, navLinks: [ { diff --git a/packages/react/ds/src/header/header.tsx b/packages/react/ds/src/header/header.tsx index 65d69720f..1199b07f4 100644 --- a/packages/react/ds/src/header/header.tsx +++ b/packages/react/ds/src/header/header.tsx @@ -48,154 +48,123 @@ export function Header({ }: HeaderProps) { const hasDivider = tools?.items || tools?.search; - const logoClassName = - 'gi-border gi-border-solid gi-border-transparent focus-visible:gi-outline-offset-0 focus-visible:gi-outline-none focus-visible:gi-border focus-visible:gi-border-solid focus-visible:gi-border-yellow-400 focus:gi-border focus:gi-border-solid focus:gi-border-yellow-400 gi-block gi-text-white hover:gi-bg-black hover:gi-bg-opacity-20 gi-py-1 gi-px-2 gi-rounded-sm'; + const headerClassNames = 'gi-header'; + const languageBarClassNames = 'gi-header-language-bar'; + const languageItemClassNames = 'gi-header-language-item'; + const menuContainerClassNames = 'gi-header-menu'; + const logoLargeClassNames = 'gi-header-logo-lg'; + const logoSmallClassNames = 'gi-header-logo-sm'; + const appTitleClassNames = 'gi-header-title'; + const toolItemClassNames = 'gi-header-tool-item'; + const navLinkContainerClassNames = 'gi-header-nav'; + const menuDividerClassNames = 'gi-header-separator'; + const overlayClassNames = 'gi-header-overlay'; + return ( -
    +
    {languages && ( -
    -
      - {languages.map((link, index) => ( -
    • - {link.href ? ( - - {link.label} - - ) : ( - {link.label} - )} -
      • - ))} -
    -
    - )} -
    ); } diff --git a/packages/react/ds/styles.css b/packages/react/ds/styles.css index b937fc2a1..d45be2097 100644 --- a/packages/react/ds/styles.css +++ b/packages/react/ds/styles.css @@ -25,69 +25,3 @@ @apply gi-text-gray-950 gi-font-primary; } } - -@layer components { - /* Header */ - - #GovieHeader { - #MenuContainer:has(#SearchTrigger:checked) ~ #SearchContainer { - height: var(--gieds-space-40); - } - - #SearchTrigger:checked ~ .search-icon { - display: none; - } - - #SearchTrigger:checked ~ .close-icon { - display: block; - } - - #MenuContainer:has(#MobileMenuTrigger:checked) ~ #HeaderMenuContainer { - transform: translateX(0); - } - #MenuContainer:has(#MobileMenuTrigger:checked) ~ #HeaderOverlayContainer { - display: block; - position: fixed; - } - } - - /* End Header */ - - /* Tabs */ - - .tab-item:checked+label { - @apply gi-border-solid gi-border-gray-200 gi-border-x-xs gi-border-t-xs gi-border-b-0 gi-bg-white gi-px-5 gi-py-3 gi--mt-2 gi-no-underline - } - - .tab-item:hover+label>* { - @apply gi-decoration-lg - } - - .tab-item:focus+label>* { - @apply gi-outline gi-outline-transparent gi-bg-yellow-400 gi-outline-2 gi-shadow gi-shadow-yellow-400 - } - - div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(1):checked) [role="tabpanel"]:nth-of-type(2), - div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(2):checked) [role="tabpanel"]:nth-of-type(3), - div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(3):checked) [role="tabpanel"]:nth-of-type(4), - div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(4):checked) [role="tabpanel"]:nth-of-type(5), - div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(5):checked) [role="tabpanel"]:nth-of-type(6), - div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(6):checked) [role="tabpanel"]:nth-of-type(7), - div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(7):checked) [role="tabpanel"]:nth-of-type(8), - div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(8):checked) [role="tabpanel"]:nth-of-type(9), - div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(9):checked) [role="tabpanel"]:nth-of-type(10), - div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(10):checked) [role="tabpanel"]:nth-of-type(11), - div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(11):checked) [role="tabpanel"]:nth-of-type(12), - div.gi-tabs:has([role="tablist"] .tab-item:nth-of-type(12):checked) [role="tabpanel"]:nth-of-type(13) { - display: block; - } - /* End Tabs */ - - /* Input File */ - - input[type='file' i] { - @apply gi-appearance-none gi-bg-[initial] gi-cursor-default gi-items-baseline gi-text-ellipsis gi-text-start gi-whitespace-pre; - } - - /* End Input File */ -} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ebdc577c5..80ba57b77 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -83,6 +83,9 @@ importers: react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) + react-syntax-highlighter: + specifier: ^15.5.0 + version: 15.5.0(react@18.3.1) react-use: specifier: ^17.5.1 version: 17.5.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -162,6 +165,9 @@ importers: '@types/react-dom': specifier: ^18.3.0 version: 18.3.0 + '@types/react-syntax-highlighter': + specifier: ^15.5.13 + version: 15.5.13 cross-env: specifier: ^7.0.3 version: 7.0.3 @@ -4338,6 +4344,9 @@ packages: '@types/react-dom@18.3.0': resolution: {integrity: sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==} + '@types/react-syntax-highlighter@15.5.13': + resolution: {integrity: sha512-uLGJ87j6Sz8UaBAooU0T6lWJ0dBmjZgN1PZTrj05TNql2/XpC6+4HhMT5syIdFUUt+FASfCeLLv4kBygNU+8qA==} + '@types/react@18.3.3': resolution: {integrity: sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==} @@ -5087,12 +5096,21 @@ packages: character-entities-html4@2.1.0: resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==} + character-entities-legacy@1.1.4: + resolution: {integrity: sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==} + character-entities-legacy@3.0.0: resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==} + character-entities@1.2.4: + resolution: {integrity: sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==} + character-entities@2.0.2: resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==} + character-reference-invalid@1.1.4: + resolution: {integrity: sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==} + character-reference-invalid@2.0.1: resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==} @@ -5242,6 +5260,9 @@ packages: resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==} engines: {node: '>= 0.8'} + comma-separated-tokens@1.0.8: + resolution: {integrity: sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==} + comma-separated-tokens@2.0.3: resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==} @@ -6124,6 +6145,9 @@ packages: fastq@1.17.1: resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==} + fault@1.0.4: + resolution: {integrity: sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==} + fault@2.0.1: resolution: {integrity: sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==} @@ -6510,6 +6534,9 @@ packages: hast-util-is-element@3.0.0: resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==} + hast-util-parse-selector@2.2.5: + resolution: {integrity: sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==} + hast-util-parse-selector@3.1.1: resolution: {integrity: sha512-jdlwBjEexy1oGz0aJ2f4GKMaVKkA9jwjr4MjAAI22E5fM/TXVZHuS5OpONtdeIkRKqAaryQ2E9xNQxijoThSZA==} @@ -6531,6 +6558,9 @@ packages: hast-util-whitespace@2.0.1: resolution: {integrity: sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng==} + hastscript@6.0.0: + resolution: {integrity: sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==} + hastscript@7.2.0: resolution: {integrity: sha512-TtYPq24IldU8iKoJQqvZOuhi5CyCQRAbvDOX0x1eW6rsHSxa/1i2CCiptNTotGHJ3VoHRGmqiv6/D3q113ikkw==} @@ -6538,6 +6568,9 @@ packages: resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==} hasBin: true + highlight.js@10.7.3: + resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==} + hmac-drbg@1.0.1: resolution: {integrity: sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==} @@ -6693,9 +6726,15 @@ packages: resolution: {integrity: sha512-/51/TKE88Lmm7Gc4/8btclNXWS+g50wXhYJq8HWIBAGUBnoAdRu1aXeh364t/O7wXDAcTJDP8PNuNKWUDWie+A==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + is-alphabetical@1.0.4: + resolution: {integrity: sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==} + is-alphabetical@2.0.1: resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==} + is-alphanumerical@1.0.4: + resolution: {integrity: sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==} + is-alphanumerical@2.0.1: resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==} @@ -6751,6 +6790,9 @@ packages: resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==} engines: {node: '>= 0.4'} + is-decimal@1.0.4: + resolution: {integrity: sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==} + is-decimal@2.0.1: resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==} @@ -6782,6 +6824,9 @@ packages: resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==} engines: {node: '>=0.10.0'} + is-hexadecimal@1.0.4: + resolution: {integrity: sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==} + is-hexadecimal@2.0.1: resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==} @@ -7208,6 +7253,9 @@ packages: lower-case@2.0.2: resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==} + lowlight@1.20.0: + resolution: {integrity: sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==} + lru-cache@10.2.2: resolution: {integrity: sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==} engines: {node: 14 || >=16.14} @@ -7884,6 +7932,9 @@ packages: resolution: {integrity: sha512-CTM5kuWR3sx9IFamcl5ErfPl6ea/N8IYwiJ+vpeB2g+1iknv7zBl5uPwbMbRVznRVbrNY6lGuDoE5b30grmbqg==} engines: {node: '>= 0.10'} + parse-entities@2.0.0: + resolution: {integrity: sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==} + parse-entities@4.0.1: resolution: {integrity: sha512-SWzvYcSJh4d/SGLIOQfZ/CoNv6BTlI6YEQ7Nj82oDVnRpwe/Z/F1EMx42x3JAOwGBlCjeCH0BRJQbQ/opHL17w==} @@ -8191,6 +8242,14 @@ packages: resolution: {integrity: sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==} engines: {node: '>= 0.8'} + prismjs@1.27.0: + resolution: {integrity: sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==} + engines: {node: '>=6'} + + prismjs@1.29.0: + resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==} + engines: {node: '>=6'} + process-nextick-args@2.0.1: resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==} @@ -8208,6 +8267,9 @@ packages: properties-file@3.5.4: resolution: {integrity: sha512-OGQPWZ4j9ENDKBl+wUHqNtzayGF5sLlVcmjcqEMUUHeCbUSggDndii+kjcBDPj3GQvqYB9sUEc4siX36wx4glw==} + property-information@5.6.0: + resolution: {integrity: sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==} + property-information@6.5.0: resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==} @@ -8360,6 +8422,11 @@ packages: '@types/react': optional: true + react-syntax-highlighter@15.5.0: + resolution: {integrity: sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==} + peerDependencies: + react: '>= 0.14.0' + react-universal-interface@0.6.2: resolution: {integrity: sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==} peerDependencies: @@ -8418,6 +8485,9 @@ packages: resolution: {integrity: sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==} engines: {node: '>= 0.4'} + refractor@3.6.0: + resolution: {integrity: sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==} + regenerate-unicode-properties@10.1.1: resolution: {integrity: sha512-X007RyZLsCJVVrjgEFVpLUTZwyOZk3oiL75ZcuYjlIWd6rNJtOjkBwQc5AsRrpbKVkxN6sklw/k/9m2jJYOf8Q==} engines: {node: '>=4'} @@ -8836,6 +8906,9 @@ packages: resolution: {integrity: sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==} engines: {node: '>= 8'} + space-separated-tokens@1.1.5: + resolution: {integrity: sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==} + space-separated-tokens@2.0.2: resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==} @@ -14638,6 +14711,10 @@ snapshots: dependencies: '@types/react': 18.3.3 + '@types/react-syntax-highlighter@15.5.13': + dependencies: + '@types/react': 18.3.3 + '@types/react@18.3.3': dependencies: '@types/prop-types': 15.7.12 @@ -15673,10 +15750,16 @@ snapshots: character-entities-html4@2.1.0: {} + character-entities-legacy@1.1.4: {} + character-entities-legacy@3.0.0: {} + character-entities@1.2.4: {} + character-entities@2.0.2: {} + character-reference-invalid@1.1.4: {} + character-reference-invalid@2.0.1: {} check-error@1.0.3: @@ -15803,6 +15886,8 @@ snapshots: dependencies: delayed-stream: 1.0.0 + comma-separated-tokens@1.0.8: {} + comma-separated-tokens@2.0.3: {} command-line-args@5.2.1: @@ -17121,6 +17206,10 @@ snapshots: dependencies: reusify: 1.0.4 + fault@1.0.4: + dependencies: + format: 0.2.2 + fault@2.0.1: dependencies: format: 0.2.2 @@ -17568,6 +17657,8 @@ snapshots: dependencies: '@types/hast': 3.0.4 + hast-util-parse-selector@2.2.5: {} + hast-util-parse-selector@3.1.1: dependencies: '@types/hast': 2.3.10 @@ -17635,6 +17726,14 @@ snapshots: hast-util-whitespace@2.0.1: {} + hastscript@6.0.0: + dependencies: + '@types/hast': 2.3.10 + comma-separated-tokens: 1.0.8 + hast-util-parse-selector: 2.2.5 + property-information: 5.6.0 + space-separated-tokens: 1.1.5 + hastscript@7.2.0: dependencies: '@types/hast': 2.3.10 @@ -17645,6 +17744,8 @@ snapshots: he@1.2.0: {} + highlight.js@10.7.3: {} + hmac-drbg@1.0.1: dependencies: hash.js: 1.1.7 @@ -17794,8 +17895,15 @@ snapshots: is-absolute-url@4.0.1: {} + is-alphabetical@1.0.4: {} + is-alphabetical@2.0.1: {} + is-alphanumerical@1.0.4: + dependencies: + is-alphabetical: 1.0.4 + is-decimal: 1.0.4 + is-alphanumerical@2.0.1: dependencies: is-alphabetical: 2.0.1 @@ -17852,6 +17960,8 @@ snapshots: dependencies: has-tostringtag: 1.0.2 + is-decimal@1.0.4: {} + is-decimal@2.0.1: {} is-docker@2.2.1: {} @@ -17874,6 +17984,8 @@ snapshots: dependencies: is-extglob: 2.1.1 + is-hexadecimal@1.0.4: {} + is-hexadecimal@2.0.1: {} is-interactive@1.0.0: {} @@ -18298,6 +18410,11 @@ snapshots: dependencies: tslib: 2.6.3 + lowlight@1.20.0: + dependencies: + fault: 1.0.4 + highlight.js: 10.7.3 + lru-cache@10.2.2: {} lru-cache@5.1.1: @@ -19316,6 +19433,15 @@ snapshots: pbkdf2: 3.1.2 safe-buffer: 5.2.1 + parse-entities@2.0.0: + dependencies: + character-entities: 1.2.4 + character-entities-legacy: 1.1.4 + character-reference-invalid: 1.1.4 + is-alphanumerical: 1.0.4 + is-decimal: 1.0.4 + is-hexadecimal: 1.0.4 + parse-entities@4.0.1: dependencies: '@types/unist': 2.0.10 @@ -19617,6 +19743,10 @@ snapshots: pretty-hrtime@1.0.3: {} + prismjs@1.27.0: {} + + prismjs@1.29.0: {} + process-nextick-args@2.0.1: {} process@0.11.10: {} @@ -19634,6 +19764,10 @@ snapshots: properties-file@3.5.4: {} + property-information@5.6.0: + dependencies: + xtend: 4.0.2 + property-information@6.5.0: {} protobufjs@7.3.2: @@ -19799,6 +19933,15 @@ snapshots: optionalDependencies: '@types/react': 18.3.3 + react-syntax-highlighter@15.5.0(react@18.3.1): + dependencies: + '@babel/runtime': 7.24.7 + highlight.js: 10.7.3 + lowlight: 1.20.0 + prismjs: 1.29.0 + react: 18.3.1 + refractor: 3.6.0 + react-universal-interface@0.6.2(react@18.3.1)(tslib@2.6.3): dependencies: react: 18.3.1 @@ -19897,6 +20040,12 @@ snapshots: globalthis: 1.0.4 which-builtin-type: 1.1.3 + refractor@3.6.0: + dependencies: + hastscript: 6.0.0 + parse-entities: 2.0.0 + prismjs: 1.27.0 + regenerate-unicode-properties@10.1.1: dependencies: regenerate: 1.4.2 @@ -20477,6 +20626,8 @@ snapshots: dependencies: whatwg-url: 7.1.0 + space-separated-tokens@1.1.5: {} + space-separated-tokens@2.0.2: {} spdx-correct@3.2.0: