@redocly/theme 0.45.2-rc.1 → 0.45.2

package/lib/core/utils/highlight.js

@@ -0,0 +1,129 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mapLang = mapLang;
+exports.highlight = highlight;
+exports.addLineNumbers = addLineNumbers;
+const Prism = __importStar(require("prismjs"));
+require("prismjs/components/prism-bash.js");
+require("prismjs/components/prism-c.js");
+require("prismjs/components/prism-clike.js");
+require("prismjs/components/prism-coffeescript.js");
+require("prismjs/components/prism-cpp.js");
+require("prismjs/components/prism-csharp.js");
+require("prismjs/components/prism-go.js");
+require("prismjs/components/prism-http.js");
+require("prismjs/components/prism-java.js");
+require("prismjs/components/prism-lua.js");
+require("prismjs/components/prism-markdown.js");
+require("prismjs/components/prism-markup-templating.js"); // dep of php
+require("prismjs/components/prism-markup.js"); // xml
+require("prismjs/components/prism-objectivec.js");
+require("prismjs/components/prism-perl.js");
+require("prismjs/components/prism-php.js");
+require("prismjs/components/prism-python.js");
+require("prismjs/components/prism-ruby.js");
+require("prismjs/components/prism-scala.js");
+require("prismjs/components/prism-sql.js");
+require("prismjs/components/prism-swift.js");
+require("prismjs/components/prism-graphql.js");
+require("prismjs/plugins/treeview/prism-treeview.js");
+const DEFAULT_LANG = 'clike';
+const NEW_LINE_EXP = /\n(?!$)/g;
+Prism.languages.insertBefore('javascript', 'string', {
+    'property string': {
+        pattern: /([{,]\s*)"(?:\\.|[^\\"\r\n])*"(?=\s*:)/i,
+        lookbehind: true,
+    },
+}, undefined);
+Prism.languages.insertBefore('javascript', 'punctuation', {
+    property: {
+        pattern: /([{,]\s*)[a-z]\w*(?=\s*:)/i,
+        lookbehind: true,
+    },
+}, undefined);
+Prism.languages.markdoc = Object.assign(Object.assign({}, Prism.languages.markdown), { tag: {
+        pattern: /{%(.|\n)*?%}/i,
+        inside: {
+            keyword: {
+                pattern: /^({%\s*\/?)(\w*|-)*\b/i,
+                lookbehind: true,
+            },
+            id: /#(\w|-)*\b/,
+            string: /".*?"/,
+            equals: /=/,
+            number: /\b\d+\b/i,
+            variable: {
+                pattern: /\$[\w.]+/i,
+                inside: {
+                    punctuation: /\./i,
+                },
+            },
+            function: /\b\w+(?=\()/,
+            punctuation: /({%|\/?%})/i,
+            boolean: /false|true/,
+        },
+    }, variable: {
+        pattern: /\$\w+/i,
+    }, function: {
+        pattern: /\b\w+(?=\()/i,
+    } });
+/**
+ * map language names to Prism.js names
+ */
+function mapLang(lang) {
+    return ({
+        json: 'js',
+        'c++': 'cpp',
+        'c#': 'csharp',
+        'c#+newtonsoft': 'csharp',
+        'java8+apache': 'java',
+        'objective-c': 'objectivec',
+        shell: 'bash',
+        viml: 'vim',
+        curl: 'bash',
+        'node.js': 'js',
+    }[lang] || DEFAULT_LANG);
+}
+/**
+ * Highlight source code string using Prism.js
+ * @param source source code to highlight
+ * @param lang highlight language
+ * @return highlighted source code as **html string**
+ */
+function highlight(source, lang = DEFAULT_LANG) {
+    lang = lang.toLowerCase();
+    const grammar = Prism.languages[lang] || Prism.languages[mapLang(lang)];
+    return Prism.highlight(source.toString(), grammar, lang);
+}
+function addLineNumbers(highlightedCode, start = 1) {
+    const codeLines = highlightedCode.split(NEW_LINE_EXP);
+    return codeLines
+        .map((line, i) => {
+        return `<span class="code-line" data-line-number=${start + i}>${line}</span>`;
+    })
+        .join('\n');
+}
+//# sourceMappingURL=highlight.js.map

package/lib/core/utils/index.d.ts

@@ -1,6 +1,6 @@
 export * from '../../core/utils/clipboard-service';
 export * from '../../core/utils/css-variables';
-export * from '../../core/utils/add-line-numbers';
+export * from '../../core/utils/highlight';
 export * from '../../core/utils/media-css';
 export * from '../../core/utils/theme-helpers';
 export * from '../../core/utils/class-names';

package/lib/core/utils/index.js

@@ -16,7 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../../core/utils/clipboard-service"), exports);
 __exportStar(require("../../core/utils/css-variables"), exports);
-__exportStar(require("../../core/utils/add-line-numbers"), exports);
+__exportStar(require("../../core/utils/highlight"), exports);
 __exportStar(require("../../core/utils/media-css"), exports);
 __exportStar(require("../../core/utils/theme-helpers"), exports);
 __exportStar(require("../../core/utils/class-names"), exports);

package/lib/core/utils/type-guards.d.ts

@@ -1,5 +1,11 @@
+import { ResolvedNavItem, ResolvedNavLinkItem } from '@redocly/config';
 export declare function isUndefined<T>(value: T | undefined): value is undefined;
 export declare function isNull<T>(value: T | null): value is null;
 export declare function isString<T>(value: T | string): value is string;
 export declare function isNotNull<T>(value: T): value is NonNullable<T>;
 export declare const isObject: (item: unknown) => item is object;
+export declare const isNavLinkItem: (item: ResolvedNavItem) => item is ResolvedNavLinkItem;
+export declare const isFromToSelectedOptions: (options: unknown) => options is {
+    from: string;
+    to: string;
+};

package/lib/core/utils/type-guards.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isObject = void 0;
+exports.isFromToSelectedOptions = exports.isNavLinkItem = exports.isObject = void 0;
 exports.isUndefined = isUndefined;
 exports.isNull = isNull;
 exports.isString = isString;
@@ -21,4 +21,12 @@ const isObject = (item) => {
     return isNotNull(item) && typeof item === 'object';
 };
 exports.isObject = isObject;
+const isNavLinkItem = (item) => {
+    return item.link !== undefined;
+};
+exports.isNavLinkItem = isNavLinkItem;
+const isFromToSelectedOptions = (options) => {
+    return (0, exports.isObject)(options) && 'from' in options && 'to' in options;
+};
+exports.isFromToSelectedOptions = isFromToSelectedOptions;
 //# sourceMappingURL=type-guards.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.45.2-rc.1",
+  "version": "0.45.2",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -27,6 +27,7 @@
   "peerDependencies": {
     "@markdoc/markdoc": "0.4.0",
     "lodash.throttle": "^4.1.1",
+    "prismjs": "^1.28.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "react-router-dom": "^6.21.1",
@@ -43,6 +44,7 @@
     "@types/jest-when": "3.5.5",
     "@types/lodash.throttle": "4.1.9",
     "@types/node": "18.19.3",
+    "@types/prismjs": "1.26.4",
     "@types/react": "18.3.9",
     "@types/react-dom": "18.2.25",
     "@types/styled-components": "5.1.34",

package/src/components/CodeBlock/CodeBlock.tsx

@@ -4,8 +4,8 @@ import styled from 'styled-components';
 import type { CodeBlockControlsProps } from '@redocly/theme/components/CodeBlock/CodeBlockControls';
 import type { ReportDialogProps } from '@redocly/theme/components/Feedback/ReportDialog';
 
-import { addLineNumbers } from '@redocly/theme/core/utils';
-import { useModalScrollLock, useReportDialog, useThemeHooks } from '@redocly/theme/core/hooks';
+import { highlight, addLineNumbers } from '@redocly/theme/core/utils';
+import { useModalScrollLock, useReportDialog } from '@redocly/theme/core/hooks';
 import { ReportDialog } from '@redocly/theme/components/Feedback/ReportDialog';
 import { CodeBlockContainer } from '@redocly/theme/components/CodeBlock/CodeBlockContainer';
 import { CodeBlockControls } from '@redocly/theme/components/CodeBlock/CodeBlockControls';
@@ -26,7 +26,6 @@ export type CodeBlockProps = {
   codeBlockMaxHeight?: string;
   hideCodeColors?: boolean;
   wrapContents?: boolean;
-  [key: string]: unknown;
 };
 
 type UnstableExternalCodeSample = {
@@ -65,25 +64,12 @@ export function CodeBlock({
   hideCodeColors,
   wrapContents = false,
   children,
-  ...rest
 }: React.PropsWithChildren<CodeBlockProps>): JSX.Element {
   const [sourceCode, setSourceCode] = useState<string>(
     (source || externalSource?.sample?.get?.(externalSource)) ?? '',
   );
-  const { useCodeHighlight } = useThemeHooks();
-  const { highlight } = useCodeHighlight() || {};
 
-  const highlightedCode = highlightedHtml
-    ? withLineNumbers
-      ? addLineNumbers(highlightedHtml, startLineNumber)
-      : highlightedHtml
-    : children
-      ? null
-      : highlight?.(sourceCode, lang, {
-          withLineNumbers,
-          startLineNumber,
-          highlight: rest['data-highlight'] as string | undefined,
-        });
+  const highlightedCode = highlightedHtml || (children ? null : highlight(sourceCode, lang));
 
   // The same initial value should be returned for ssr and frontend to avoid issues
   // Because we don't have session storage in ssr and can't get the security details there
@@ -116,11 +102,13 @@ export function CodeBlock({
         />
         <CodeBlockContainer
           ref={codeBlockRef}
-          withLineNumbers={withLineNumbers}
+          className={withLineNumbers ? 'line-numbers' : ''}
           dangerouslySetInnerHTML={
             highlightedCode
               ? {
-                  __html: highlightedCode,
+                  __html: withLineNumbers
+                    ? addLineNumbers(highlightedCode, startLineNumber)
+                    : highlightedCode,
                 }
               : undefined
           }

package/src/components/CodeBlock/CodeBlockContainer.tsx

@@ -8,7 +8,7 @@ export type CodeBlockContainerProps = PropsWithChildren<{
   maxHeight?: string;
   wrapContents?: boolean;
   ref?: (instance: HTMLPreElement | null) => void;
-  withLineNumbers?: boolean;
+  className?: string;
   dangerouslySetInnerHTML?: {
     __html: string;
   };
@@ -117,249 +117,20 @@ const CodeBlockContainerComponent = styled.pre<CodeBlockContainerProps>`
     cursor: help;
   }
 
-  .line-number {
-    display: inline-block;
-    min-width: 2.5em;
-    padding-right: 0.8em;
-    text-align: right;
-    pointer-events: none;
-    user-select: none;
+  .code-line {
+    &:before {
+      content: attr(data-line-number);
+      display: inline-block;
+      min-width: 2em;
+      padding-right: 0.8em;
+      text-align: right;
+      pointer-events: none;
+      user-select: none;
+    }
   }
 
   .highlighted {
     background: var(--tag-basic-bg-color);
-    margin-left: calc(var(--spacing-sm) * -1);
-    padding-left: var(--spacing-sm);
-
-    &.error {
-      background: var(--color-raspberry-2);
-    }
-
-    &.warning {
-      background: var(--color-carrot-2);
-    }
-  }
-
-  /*
-  * Shiki styles
-   */
-
-  .line {
-    display: block;
-  }
-
-  .has-diff {
-    > .line {
-      &:before {
-        content: ' ';
-        display: inline-block;
-        min-width: 1em;
-        padding-right: 0.4em;
-        text-align: right;
-        pointer-events: none;
-        user-select: none;
-      }
-    }
-  }
-
-  .diff {
-    margin-left: calc(var(--spacing-sm) * -1);
-    padding-left: var(--spacing-sm);
-
-    &.add {
-      background: var(--color-grass-2);
-      &:before {
-        content: '+';
-        color: var(--color-grass-7);
-      }
-    }
-    &.remove {
-      background: var(--color-raspberry-2);
-
-      &:before {
-        content: '-';
-        color: var(--color-raspberry-7);
-      }
-    }
-  }
-
-  .highlighted-word {
-    background: var(--color-carrot-2);
-    border: 1px solid var(--color-carrot-5);
-    border-radius: 4px;
-  }
-
-  .has-focused {
-    .line {
-      opacity: 0.7;
-      filter: blur(0.095rem);
-      transition:
-        filter 0.35s,
-        opacity 0.35s;
-      &.focused {
-        opacity: 1;
-        filter: blur(0);
-      }
-    }
-
-    &:hover {
-      .line {
-        opacity: 1;
-        filter: blur(0);
-      }
-    }
-  }
-
-  /*
-  * Tree view styles
-   */
-
-  .tree-view-line {
-    display: flex;
-  }
-
-  .tree-view-branch {
-    color: var(--code-block-tree-view-lines-color);
-  }
-
-  .tree-view-file {
-    display: inline-flex;
-    &::before {
-      content: '\\ea01';
-      margin-right: 0.5rem;
-      font-family: 'TreeViewIcons';
-    }
-
-    &.no-file {
-      &::before {
-        content: '';
-        margin-right: 0;
-      }
-    }
-
-    &.ext-folder {
-      &::before {
-        content: '\\ea02';
-      }
-    }
-
-    &.ext-img,
-    &.ext-png,
-    &.ext-jpg,
-    &.ext-jpeg,
-    &.ext-gif,
-    &.ext-svg {
-      &::before {
-        content: '\\ea03';
-      }
-    }
-
-    &.ext-mp2,
-    &.ext-mp3,
-    &.ext-wav,
-    &.ext-ogg,
-    &.ext-flac {
-      &::before {
-        content: '\\ea04';
-        margin-right: 0.5rem;
-      }
-    }
-
-    &.ext-mp4,
-    &.ext-mkv,
-    &.ext-avi,
-    &.ext-mov,
-    &.ext-wmv,
-    &.ext-flv {
-      &::before {
-        content: '\\ea05';
-        margin-right: 0.5rem;
-      }
-    }
-
-    &.ext-txt,
-    &.ext-text,
-    &.ext-md,
-    &.ext-markdown {
-      &::before {
-        content: '\\ea06';
-        margin-right: 0.5rem;
-      }
-    }
-
-    &.ext-js,
-    &.ext-ts,
-    &.ext-jsx,
-    &.ext-tsx,
-    &.ext-json,
-    &.ext-yaml,
-    &.ext-yml,
-    &.ext-xml,
-    &.ext-html,
-    &.ext-css,
-    &.ext-scss,
-    &.ext-less,
-    &.ext-sass,
-    &.ext-java,
-    &.ext-c,
-    &.ext-cpp,
-    &.ext-cs,
-    &.ext-php,
-    &.ext-py,
-    &.ext-rb,
-    &.ext-go,
-    &.ext-swift,
-    &.ext-sql,
-    &.ext-perl,
-    &.ext-lua,
-    &.ext-scala,
-    &.ext-sh {
-      &::before {
-        content: '\\ea07';
-        margin-right: 0.5rem;
-      }
-    }
-
-    &.ext-zip,
-    &.ext-rar,
-    &.ext-tar,
-    &.ext-gz,
-    &.ext-iso {
-      &::before {
-        content: '\\ea08';
-      }
-    }
-
-    &.ext-pdf,
-    &.ext-PDF {
-      &::before {
-        content: '\\ea09';
-      }
-    }
-
-    &.ext-excel,
-    &.ext-xls,
-    &.ext-xlsx {
-      &::before {
-        content: '\\ea0a';
-      }
-    }
-
-    &.ext-powerpoint,
-    &.ext-ppt,
-    &.ext-pptx {
-      &::before {
-        content: '\\ea0b';
-      }
-    }
-
-    &.ext-doc,
-    &.ext-docx,
-    &.ext-rtf {
-      &::before {
-        content: '\\ea0c';
-      }
-    }
   }
 
   ${generateCodeBlockTokens()}
@@ -367,9 +138,9 @@ const CodeBlockContainerComponent = styled.pre<CodeBlockContainerProps>`
   ${({ hideCodeColors }) =>
     hideCodeColors &&
     css`
-      .line-number:not(.highlighted),
-      .line-number:not(.highlighted) > span,
-      .line-number:not(.highlighted) > span > span {
+      .code-line:not(.highlighted),
+      .code-line:not(.highlighted) > span,
+      .code-line:not(.highlighted) > span > span {
         color: grey;
       }
     `}

package/src/components/CodeBlock/variables.ts

@@ -1,30 +1,6 @@
 import { css } from 'styled-components';
 
 export const code = css`
-  /**
-    * Tree view icons font
-    */
-  @font-face {
-    font-family: 'TreeViewIcons';
-    /**
-    * Use the following escape sequences to refer to a specific icon:
-    *
-    * - \\ea01 file
-    * - \\ea02 folder
-    * - \\ea03 image
-    * - \\ea04 audio
-    * - \\ea05 video
-    * - \\ea06 text
-    * - \\ea07 code
-    * - \\ea08 archive
-    * - \\ea09 pdf
-    * - \\ea0a excel
-    * - \\ea0b powerpoint
-    * - \\ea0c word
-    */
-    src: url('data:application/font-woff;base64,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') format('woff');
-  }
-  
   /**
     * @tokens Code base styles
     */
@@ -112,11 +88,5 @@ export const code = css`
   --code-block-tokens-class-name-color: var(--color-carrot-7); // @presenter Color
   --code-block-tokens-function-color: var(--color-carrot-7); // @presenter Color
 
-  /**
-    * @tokens Code Block tree view
-   */
-  --code-block-tree-view-icon-font-family: 'TreeViewIcons'; // @presenter FontFamily
-  --code-block-tree-view-lines-color: var(--border-color-primary); // @presenter Color
-
   // @tokens End
 `;

package/src/components/Filter/FilterContent.tsx

@@ -8,6 +8,7 @@ import { FilterInput } from '@redocly/theme/components/Filter/FilterInput';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { Filter } from '@redocly/theme/components/Filter/Filter';
+import { isFromToSelectedOptions } from '@redocly/theme/core/utils';
 
 export type FilterContentProps = {
   setFilterTerm: (value: string) => void;
@@ -29,7 +30,11 @@ export function FilterContent({
     if (filterTerm) return true;
     if (filter.selectedOptions && filter.selectedOptions instanceof Set) {
       return filter.selectedOptions.size;
-    } else if (filter.selectedOptions.from && filter.selectedOptions.to) {
+    } else if (
+      isFromToSelectedOptions(filter.selectedOptions) &&
+      filter.selectedOptions.from &&
+      filter.selectedOptions.to
+    ) {
       return true;
     }
   });

package/src/components/Footer/FooterColumn.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import type { ResolvedNavItem } from '@redocly/config';
 
 import { FooterItem } from '@redocly/theme/components/Footer/FooterItem';
-import { breakpoints } from '@redocly/theme/core/utils';
+import { breakpoints, isNavLinkItem } from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Link } from '@redocly/theme/components/Link/Link';
 
@@ -24,7 +24,7 @@ export function FooterColumn({ column, className }: FooterColumnProps): JSX.Elem
   return (
     <FooterColumnWrapper data-component-name="Footer/FooterColumn" className={className}>
       <FooterColumnTitle>
-        {column.link ? (
+        {isNavLinkItem(column) ? (
           <Link to={column.link} external={column.external} target={column.target}>
             {label}
           </Link>

package/src/components/Markdown/variables.ts

@@ -5,7 +5,7 @@ export const markdown = css`
   * @tokens Markdown Content
   */
 
-  --md-content-max-width: 910px;
+  --md-content-max-width: 688px;
   --md-content-padding: 25px 0px 25px 0px; // @presenter Spacing
   --md-content-font-size: var(--font-size-base); // @presenter FontSize
   --md-content-font-family: var(--font-family-base); // @presenter FontFamily

package/src/components/Search/SearchFilterField.tsx

@@ -5,7 +5,7 @@ import type { SearchFacet, SearchFilterItem } from '@redocly/theme/core/types';
 
 import { Button } from '@redocly/theme/components/Button/Button';
 import { ResetIcon } from '@redocly/theme/icons/ResetIcon/ResetIcon';
-import { useThemeHooks } from '@redocly/theme/core';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { SearchFilterFieldSelect } from '@redocly/theme/components/Search/FilterFields/SearchFilterFieldSelect';
 import { SearchFilterFieldTags } from '@redocly/theme/components/Search/FilterFields/SearchFilterFieldTags';
 

package/src/components/UserMenu/LogoutMenuItem.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { LogoutIcon } from '@redocly/theme/icons/LogoutIcon/LogoutIcon';
-
-import { DropdownMenuItem } from '../Dropdown/DropdownMenuItem';
+import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
 
 export type LogoutMenuItemProps = {
   iconOnly?: boolean;

package/src/components/UserMenu/UserMenu.tsx

@@ -12,7 +12,7 @@ import { UserAvatar } from '@redocly/theme/components/UserMenu/UserAvatar';
 import { UserInfoMenuItem } from '@redocly/theme/components/UserMenu/UserInfoMenuItem';
 import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
 import { LogoutMenuItem } from '@redocly/theme/components/UserMenu/LogoutMenuItem';
-import { breakpoints } from '@redocly/theme/core';
+import { breakpoints } from '@redocly/theme/core/utils';
 
 export type UserMenuProps = {
   className?: string;