@redocly/theme 0.4.15 → 0.5.0

package/{utils → lib/utils}/replaceHashInColor.js

@@ -5,3 +5,4 @@ function replaceHashInColor(color) {
     return color.replace('#', '%23');
 }
 exports.replaceHashInColor = replaceHashInColor;
+//# sourceMappingURL=replaceHashInColor.js.map

package/lib/utils/theme-helpers.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateCodeBlockTokens = exports.typography = exports.getTypographyCssRulesByComponentName = void 0;
+const styled_components_1 = require("styled-components");
+var Token;
+(function (Token) {
+    Token["Comment"] = "comment";
+    Token["Prolog"] = "prolog";
+    Token["Doctype"] = "doctype";
+    Token["Cdata"] = "cdata";
+    Token["Punctuation"] = "punctuation";
+    Token["Property"] = "property";
+    Token["Tag"] = "tag";
+    Token["Number"] = "number";
+    Token["Constant"] = "constant";
+    Token["Symbol"] = "symbol";
+    Token["Boolean"] = "boolean";
+    Token["Selector"] = "selector";
+    Token["String"] = "string";
+    Token["Char"] = "char";
+    Token["Builtin"] = "builtin";
+    Token["Inserted"] = "inserted";
+    Token["Operator"] = "operator";
+    Token["Entity"] = "entity";
+    Token["Url"] = "url";
+    Token["Variable"] = "variable";
+    Token["Atrule"] = "atrule";
+    Token["AttrValue"] = "attr-value";
+    Token["AttrName"] = "attr-name";
+    Token["Keyword"] = "keyword";
+    Token["Regex"] = "regex";
+    Token["Important"] = "important";
+    Token["Bold"] = "bold";
+    Token["Italic"] = "italic";
+    Token["Deleted"] = "deleted";
+})(Token || (Token = {}));
+const typographyProperties = Object.entries({
+    fontSize: 'font-size',
+    fontWeight: 'font-weight',
+    fontFamily: 'font-family',
+    lineHeight: 'line-height',
+    color: 'text-color',
+    textTransform: 'text-transform',
+});
+function getTypographyCssRulesByComponentName(componentName, fallbackName) {
+    const result = {};
+    for (const [styledPropertyName, cssPropertyName] of typographyProperties) {
+        const cssVariable = `--${componentName}-${cssPropertyName}`;
+        const fallbackVariable = fallbackName ? `,var(--${fallbackName}-${cssPropertyName})` : '';
+        result[styledPropertyName] = `var(${cssVariable}${fallbackVariable})`;
+    }
+    return result;
+}
+exports.getTypographyCssRulesByComponentName = getTypographyCssRulesByComponentName;
+function typography(componentName, fallbackName) {
+    return (0, styled_components_1.css) `
+    ${getTypographyCssRulesByComponentName(componentName, fallbackName)}
+  `;
+}
+exports.typography = typography;
+function generateCodeBlockTokens() {
+    let res = '';
+    for (const token of Object.values(Token)) {
+        const cssTokenColorVariableName = `--code-block-tokens-${token}-color`;
+        res += `.token.${token} { color: var(${cssTokenColorVariableName})}; }\n`;
+    }
+    return (0, styled_components_1.css) `
+    pre& {
+      color: var(--code-block-tokens-default-color);
+    }
+    ${res}
+  `;
+}
+exports.generateCodeBlockTokens = generateCodeBlockTokens;
+//# sourceMappingURL=theme-helpers.js.map

package/package.json

@@ -1,21 +1,120 @@
 {
   "name": "@redocly/theme",
-  "version": "0.4.15",
+  "version": "0.5.0",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
-  "main": "index.js",
-  "typings": "index.d.ts",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": "./lib/index.js",
+    "./Sidebar/*": "./lib/Sidebar/*.js",
+    "./*": "./lib/*/index.js",
+    "./src/": "./src/"
+  },
+  "scripts": {
+    "start": "npm-run-all --parallel storybook storybook:tokens:watch",
+    "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",
+    "ts:check": "tsc --noEmit --skipLibCheck",
+    "clean": "rm -rf lib",
+    "compile": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+    "build": "npm run clean && npm run compile",
+    "test": "jest",
+    "test:update": "jest -u",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "test:coverage:html": "jest --coverage --coverageReporters html",
+    "e2e": "npx chromatic -b storybook:build --auto-accept-changes main --exit-once-uploaded",
+    "storybook": "start-storybook -p 6006",
+    "storybook:build": "npm run storybook:tokens && build-storybook",
+    "storybook:tokens": "ts-node scripts/generate-css-tokens.ts",
+    "storybook:tokens:watch": "ts-node-dev --respawn scripts/generate-css-tokens.ts",
+    "chromatic": "chromatic --exit-zero-on-changes"
+  },
   "peerDependencies": {
     "lodash.throttle": "^4.1.1",
     "prismjs": "^1.28.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",
-    "styled-components": "^5.3.1",
+    "styled-components": "^5.3.6",
     "styled-system": "^5.1.5"
   },
+  "devDependencies": {
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-interactions": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/addon-viewport": "^6.5.9",
+    "@storybook/addons": "^6.5.9",
+    "@storybook/builder-webpack5": "^6.5.9",
+    "@storybook/core-common": "^6.5.9",
+    "@storybook/manager-webpack5": "^6.5.9",
+    "@storybook/node-logger": "^6.5.9",
+    "@storybook/react": "^6.5.9",
+    "@storybook/testing-library": "^0.0.11",
+    "@storybook/theming": "^6.5.9",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^12.1.4",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^29.1.2",
+    "@types/jest-when": "^3.5.2",
+    "@types/lodash.throttle": "^4.1.7",
+    "@types/node": "^16.11.26",
+    "@types/prismjs": "^1.26.0",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
+    "@types/react-router-dom": "^5.3.1",
+    "@types/styled-components": "^5.1.15",
+    "@types/styled-system": "^5.1.13",
+    "@typescript-eslint/eslint-plugin": "^5.23.0",
+    "@typescript-eslint/parser": "^5.23.0",
+    "chromatic": "^6.10.2",
+    "esbuild": "^0.15.11",
+    "jest": "^29.2.0",
+    "jest-environment-jsdom": "^29.2.0",
+    "jest-styled-components": "^7.1.1",
+    "jest-when": "^3.5.1",
+    "lodash.throttle": "^4.1.1",
+    "npm-run-all": "^4.1.5",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-refresh": "^0.14.0",
+    "react-router-dom": "^5.3.0",
+    "storybook-addon-pseudo-states": "^1.15.1",
+    "storybook-design-token": "^2.7.1",
+    "styled-components": "^5.3.6",
+    "styled-system": "^5.1.5",
+    "ts-jest": "^29.0.3",
+    "ts-node": "^10.7.0",
+    "ts-node-dev": "^2.0.0",
+    "tsc-alias": "^1.7.0",
+    "tsconfig-paths-webpack-plugin": "^3.5.2",
+    "typescript": "^4.8.4",
+    "webpack": "^5.72.0",
+    "concurrently": "^7.4.0"
+  },
   "dependencies": {
     "timeago.js": "^4.0.2"
+  },
+  "nx": {
+    "namedInputs": {
+      "prod": [
+        "!{projectRoot}/**/__tests__/**",
+        "!{projectRoot}/**/*.stories.{ts,tsx}"
+      ]
+    },
+    "targets": {
+      "build": {
+        "outputs": [
+          "{projectRoot}/lib"
+        ]
+      },
+      "test": {
+        "outputs": []
+      }
+    }
   }
-}
+}

package/src/ApiOnboarding/AppCustomAttributes.tsx

@@ -0,0 +1,6 @@
+interface AppCustomAttributesProps {
+  onChange: (value: Record<string, string>) => void;
+}
+export function AppCustomAttributes(_props: AppCustomAttributesProps) {
+  return null;
+}

package/src/Button/Button.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import type { FlattenSimpleInterpolation, Keyframes } from 'styled-components';
 import styled, { css, keyframes } from 'styled-components';
 
+import type { FlattenSimpleInterpolation, Keyframes } from 'styled-components';
+
 import { Link } from '@portal/Link';
 
 export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge' | string;

package/src/Cards/Card.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { ResolvedNavItem } from '@theme/types/portal';
-
 import { Link } from '@portal/Link';
 import { H3 } from '@theme/Typography';
+import type { ResolvedNavItem } from '@theme/types/portal';
 
 export interface CardProps {
   title?: string;

package/src/CopyButton/CopyButtonWrapper.tsx

@@ -1,11 +1,10 @@
 import React, { memo } from 'react';
 
-import type { TooltipProps } from '@theme/Tooltip';
-
 import { SamplesControlButton } from '@theme/SamplesPanelControls';
 import { Tooltip } from '@theme/Tooltip';
 import { useControl } from '@theme/hooks';
 import { ClipboardService } from '@theme/utils';
+import type { TooltipProps } from '@theme/Tooltip';
 
 export interface CopyButtonWrapperProps {
   data: unknown;

package/src/EditPageButton/EditPageButton.tsx

@@ -26,6 +26,10 @@ const EditButton = styled(Link)`
   font-size: var(--font-size-base);
   font-family: var(--font-family-base);
   text-decoration: none;
+
+  @media print {
+    display: none;
+  }
 `;
 
 const ButtonIcon = styled.img`

package/src/Footer/CustomFooter.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { NavGroupRecord, ResolvedNavItem } from '@theme/types/portal';
-
 import { CustomFooterNavItem } from '@theme/Footer/CustomFooterNavItem';
 import { FooterCopyright } from '@theme/Footer/FooterCopyright';
+import type { NavGroupRecord, ResolvedNavItem } from '@theme/types/portal';
 
 interface FooterProps {
   data: NavGroupRecord;

package/src/Footer/CustomFooterNavItem.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { ResolvedNavItem, ResolvedNavLinkItem } from '@theme/types/portal';
-
 import { Link } from '@portal/Link';
+import type { ResolvedNavItem, ResolvedNavLinkItem } from '@theme/types/portal';
 
 interface CustomFooterNavItemProps {
   navItem: ResolvedNavItem;

package/src/Footer/Footer.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { NavGroupRecord, ResolvedNavItem } from '@theme/types/portal';
-
 import { FooterColumns } from '@theme/Footer/FooterColumns';
 import { FooterCopyright } from '@theme/Footer/FooterCopyright';
 import { isEmptyArray } from '@theme/utils';
 import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
+import type { NavGroupRecord, ResolvedNavItem } from '@theme/types/portal';
 
 interface FooterProps {
   data: NavGroupRecord;

package/src/Footer/FooterColumn.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { ResolvedNavItem } from '@theme/types/portal';
-
 import { Link } from '@portal/Link';
+import type { ResolvedNavItem } from '@theme/types/portal';
 
 interface FooterColumnProps {
   column: ResolvedNavItem;
@@ -23,7 +22,13 @@ export function FooterColumn({ column }: FooterColumnProps): JSX.Element {
             {columnItem.label}
           </FooterSeparator>
         ) : (
-          <FooterLink key={columnItemIndex} to={columnItem.link} data-cy={columnItem.label}>
+          <FooterLink
+            key={columnItemIndex}
+            to={columnItem.link}
+            external={columnItem.external}
+            target={columnItem.target}
+            data-cy={columnItem.label}
+          >
             {columnItem.label}
           </FooterLink>
         );

package/src/Footer/FooterColumns.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { ResolvedNavItem } from '@theme/types/portal';
-
 import { FooterColumn } from '@theme/Footer/FooterColumn';
+import type { ResolvedNavItem } from '@theme/types/portal';
 
 interface FooterColumnsProps {
   columns: ResolvedNavItem[];

package/src/JsonViewer/JsonViewer.tsx

@@ -1,7 +1,8 @@
-import type { ReactElement } from 'react';
 import React, { memo, useRef } from 'react';
 import styled from 'styled-components';
 
+import type { ReactElement } from 'react';
+
 import { CopyButtonWrapper } from '@theme/CopyButton';
 import { SampleControls, SamplesControlButton } from '@theme/SamplesPanelControls';
 import { jsonToHTML } from '@theme/utils';

package/src/LastUpdated/LastUpdated.tsx

@@ -4,28 +4,64 @@ import { format } from 'timeago.js';
 
 import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
 
+const FORMATS = {
+  timeago: (date: Date, locale: string) => format(date, locale),
+  iso: (date: Date) => date.toISOString().split('T')[0],
+  short: (date: Date, locale: string) =>
+    date.toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric' }),
+  long: (date: Date, locale: string) =>
+    date.toLocaleDateString(locale, { month: 'long', day: 'numeric', year: 'numeric' }),
+};
+
 export interface LastUpdatedProps {
-  lastModified: string | Date;
+  lastModified: Date;
+  format?: keyof typeof FORMATS;
+  locale?: string;
 }
 
-export function LastUpdated({ lastModified }: LastUpdatedProps): JSX.Element | null {
+export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
   const { lastUpdatedBlock } = useDefaultThemeSettings();
 
   if (lastUpdatedBlock?.hide) {
     return null;
   }
 
+  const lastModified = props.lastModified;
+  const format = props.format || lastUpdatedBlock?.format || 'timeago';
+  const locale = props.locale || lastUpdatedBlock?.locale || 'en-US';
+  const isoDate = lastModified.toISOString().split('T')[0];
+
+  const lastUpdatedString = FORMATS[format](lastModified, locale);
+  const separator = format === 'timeago' ? ' ' : ' on ';
+
   return (
-    <Wrapper data-component-name="LastUpdated/LastUpdated">
-      Last updated {format(lastModified)}
+    <Wrapper
+      data-component-name="LastUpdated/LastUpdated"
+      rawOnPrint={format === 'timeago'}
+      data-print-datetime={isoDate}
+    >
+      Last updated{separator}
+      <time dateTime={isoDate}>{lastUpdatedString}</time>
     </Wrapper>
   );
 }
 
-const Wrapper = styled.div`
+const Wrapper = styled.div<{ rawOnPrint?: boolean }>`
   color: var(--last-updated-text-color);
   font-size: var(--last-updated-font-size);
   font-family: var(--last-updated-font-family);
   line-height: var(--last-updated-line-height);
   padding-bottom: 30px;
+
+  ${({ rawOnPrint }) =>
+    rawOnPrint &&
+    `@media print {
+      time {
+        display: none;
+      }
+      &::after {
+        content: attr(data-print-datetime);
+      }
+    }
+  `}
 `;

package/src/Markdown/Admonition.tsx

@@ -36,6 +36,9 @@ const Wrapper = styled.div<AdmonitionTypeProps>`
   font-weight: var(--admonition-font-weight);
   line-height: var(--admonition-line-height);
 
+  print-color-adjust: exact;
+  -webkit-print-color-adjust: exact;
+
   ${({ type }) => `
     background-color: var(--admonition-${type}-background-color);
     color: var(--admonition-${type}-text-color);

package/src/Markdown/CodeSample/CodeSample.tsx

@@ -64,6 +64,10 @@ const CopyCodeButton = styled.div`
   &:hover {
     cursor: pointer;
   }
+
+  @media print {
+    display: none;
+  }
 `;
 
 const DoneIndicator = styled.div`
@@ -150,6 +154,10 @@ const Wrapper = styled.div`
     border-radius: var(--code-block-border-radius);
     font-family: var(--code-font-family);
     background-color: var(--code-block-background-color);
+
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+
     code {
       background-color: transparent;
       border: 0;

package/src/Markdown/Heading.tsx

@@ -1,6 +1,7 @@
-import type { PropsWithChildren } from 'react';
 import React, { createElement } from 'react';
 
+import type { PropsWithChildren } from 'react';
+
 import { concatClassNames } from '@theme/utils';
 
 /**

package/src/Markdown/MarkdownLayout.tsx

@@ -15,6 +15,7 @@ type MarkdownLayoutProps = {
     text: string;
     icon: string;
   };
+  /** String in ISO format */
   lastModified?: string | null;
 };
 
@@ -28,7 +29,7 @@ export function MarkdownLayout({
     <PageWrapper data-component-name="Markdown/MarkdownLayout">
       <ContainerWrapper withToc={true}>
         <LayoutTop>
-          {lastModified && <LastUpdated lastModified={lastModified} />}
+          {lastModified && <LastUpdated lastModified={new Date(lastModified)} />}
           {editPage && (
             <EditPageButton text={editPage.text} to={editPage.to} icon={editPage.icon} />
           )}

package/src/Markdown/MarkdownWrapper.tsx

@@ -1,6 +1,7 @@
-import type { FlattenSimpleInterpolation } from 'styled-components';
 import styled, { css } from 'styled-components';
 
+import type { FlattenSimpleInterpolation } from 'styled-components';
+
 import { typography } from '@theme/utils';
 
 export const baseTable = css`

package/src/Markdown/Sup.tsx

@@ -1,7 +1,8 @@
-import type { PropsWithChildren } from 'react';
 import React from 'react';
 import styled from 'styled-components';
 
+import type { PropsWithChildren } from 'react';
+
 export function Sup({ children }: PropsWithChildren<unknown>): JSX.Element {
   return <Wrapper data-component-name="Markdown/Sup">{children}</Wrapper>;
 }

package/src/Markdown/Tabs/Tabs.tsx

@@ -1,7 +1,8 @@
-import type { PropsWithChildren } from 'react';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 
+import type { PropsWithChildren } from 'react';
+
 import { Tab } from '@theme/Markdown/Tabs/Tab';
 
 type TabsProps = PropsWithChildren<{ children: { props: { label: string } & TabsProps }[] }>;

package/src/Navbar/MobileNavbarDropdown.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { ResolvedNavLinkItem } from '@theme/types/portal';
-
 import { Link } from '@portal/Link';
+import type { ResolvedNavLinkItem } from '@theme/types/portal';
 
 interface NavbarDropdownProps {
   items: ResolvedNavLinkItem[];

package/src/Navbar/MobileNavbarItem.tsx

@@ -2,16 +2,15 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 import { useLocation } from 'react-router-dom';
 
+import { Link } from '@portal/Link';
+import { withPathPrefix } from '@portal/utils';
+import { MobileDropdownWrapper, MobileNavbarDropdown } from '@theme/Navbar/MobileNavbarDropdown';
 import type {
   ResolvedNavItem,
   ResolvedNavLinkItem,
   ResolvedNavGroupItem,
 } from '@theme/types/portal';
 
-import { Link } from '@portal/Link';
-import { withPathPrefix } from '@portal/utils';
-import { MobileDropdownWrapper, MobileNavbarDropdown } from '@theme/Navbar/MobileNavbarDropdown';
-
 export interface NavbarItemProps {
   navItem: ResolvedNavItem;
   className?: string;

package/src/Navbar/MobileNavbarMenu.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { ResolvedConfigLinks, ResolvedNavItem } from '@theme/types/portal';
-
 import { NavbarMenuItem, NavbarMenuItemWithDropdownWrapper } from '@theme/Navbar/NavbarItem';
 import { MobileNavbarItem } from '@theme/Navbar/MobileNavbarItem';
 import { DropdownWrapper } from '@theme/Navbar/NavbarDropdown';
 import { isPrimitive, isEmptyArray } from '@theme/utils';
+import type { ResolvedConfigLinks, ResolvedNavItem } from '@theme/types/portal';
 
 export function MobileNavbarMenu({
   menuItems,

package/src/Navbar/Navbar.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { ResolvedConfigLinks } from '@theme/types/portal';
-
 import { NavbarMenu } from '@theme/Navbar';
 import { useMobileMenu } from '@theme/hooks/useMobileMenu';
 import { MobileNavbarMenuButton } from '@theme/Navbar/MobileNavbarMenuButton';
 import { MobileNavbarMenu } from '@theme/Navbar/MobileNavbarMenu';
 import { ColorModeSwitcher } from '@theme/ColorModeSwitcher/ColorModeSwitcher';
 import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
+import type { ResolvedConfigLinks } from '@theme/types/portal';
 
 interface NavbarProps {
   menu: ResolvedConfigLinks;

package/src/Navbar/NavbarDropdown.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { ResolvedNavLinkItem } from '@theme/types/portal';
-
 import { Link } from '@portal/Link';
+import type { ResolvedNavLinkItem } from '@theme/types/portal';
 
 interface NavbarDropdownProps {
   items: ResolvedNavLinkItem[];

package/src/Navbar/NavbarItem.tsx

@@ -2,16 +2,15 @@ import React from 'react';
 import styled from 'styled-components';
 import { useLocation } from 'react-router-dom';
 
+import { Link } from '@portal/Link';
+import { withPathPrefix } from '@portal/utils';
+import { NavbarDropdown, DropdownWrapper } from '@theme/Navbar/NavbarDropdown';
 import type {
   ResolvedNavItem,
   ResolvedNavLinkItem,
   ResolvedNavGroupItem,
 } from '@theme/types/portal';
 
-import { Link } from '@portal/Link';
-import { withPathPrefix } from '@portal/utils';
-import { NavbarDropdown, DropdownWrapper } from '@theme/Navbar/NavbarDropdown';
-
 export interface NavbarItemProps {
   navItem: ResolvedNavItem;
   className?: string;
@@ -29,7 +28,7 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
         data-component-name="Navbar/NavbarItem"
         className={className}
       >
-        <NavbarLink to={item.link} active={isActive}>
+        <NavbarLink to={item.link} external={item.external} target={item.target} active={isActive}>
           <NavbarLabel>{item.label}</NavbarLabel>
         </NavbarLink>
       </NavbarMenuItem>

package/src/Navbar/NavbarMenu.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { ResolvedConfigLinks, ResolvedNavItem } from '@theme/types/portal';
-
 import { NavbarItem } from '@theme/Navbar/NavbarItem';
 import { isPrimitive } from '@theme/utils';
+import type { ResolvedConfigLinks, ResolvedNavItem } from '@theme/types/portal';
 
 export function NavbarMenu({ menuItems }: { menuItems: ResolvedConfigLinks }): JSX.Element | null {
   if (isPrimitive(menuItems)) {

package/src/NavbarLogo/NavbarLogo.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { LogoConfig } from '@theme/types/portal';
-
 import { Link } from '@portal/Link';
+import type { LogoConfig } from '@theme/types/portal';
 
 export type NavbarLogoProps = { logo: Pick<LogoConfig, 'image' | 'link' | 'altText'> };