@redocly/theme 0.1.27 → 0.1.28

package/src/types/portal/src/server/store.d.ts

@@ -1,13 +1,9 @@
 import { Plugin } from 'esbuild';
 import { JSONIndex, SearchDocument, SearchData } from '../shared/models';
+import type { PageStaticData } from '../shared/types.js';
 import type { RouteDetails, Redirect } from './plugins/types.js';
-import type { GlobalData, GlobalConfig, RbacConfig } from './plugins/portal-config/types';
-export declare class Template {
-    pathOrThemePath: string;
-    id: string;
-    hash: string;
-    constructor(pathOrThemePath: string, id: string);
-}
+import type { GlobalData, GlobalConfig } from './plugins/portal-config/types';
+import type { ContentProvider } from './content/content-provider';
 export declare class Store {
     contentDir: string;
     outdir: string;
@@ -18,10 +14,11 @@ export declare class Store {
     searchDocuments: SearchDocument[];
     searchIndex: JSONIndex;
     sharedData: Map<string, unknown>;
-    templates: Map<string, Template>;
+    routesStaticDataCache: Map<string, PageStaticData>;
+    templates: Map<string, string>;
+    serverPropsGetters: Map<string, string>;
     esbuildPlugins: Plugin[];
     listeners: Map<string, Set<Function>>;
-    rbacConfig: RbacConfig;
     globalData: GlobalData;
     cliOptions: Record<string, string>;
     globalConfig: GlobalConfig;
@@ -34,19 +31,22 @@ export declare class Store {
     on(type: 'global-data-updated', cb: (pathname: string, data: Record<string, unknown>) => void): void;
     runListeners<T extends Array<unknown>>(type: 'template-updated' | 'global-data-updated' | 'shared-data-updated' | 'search-data-updated' | 'routes-updated' | 'build-updated', ...args: T): void;
     addEsbuildPlugin(plugin: Plugin): void;
-    setGlobalData(data: GlobalData): void;
+    setGlobalData: (data: GlobalData) => void;
     setSearchData(data: SearchData): void;
     setCliOptions(data: Record<string, string>): void;
     setGlobalConfig(data: Partial<GlobalConfig>): void;
-    setRbacConfig(rbacConfig: RbacConfig): void;
+    getRbacPermissionsByRole(role: string): string[] | undefined;
+    getGlobalConfig<T = unknown>(key: string): T;
     addRedirect(from: string, to: Redirect): void;
     createSharedData: (id: string, data: unknown) => string;
     addRouteSharedData: (routeSlug: string, dataKey: string, dataId: string) => void;
     addRoute: (route: RouteDetails) => void;
-    getRouteByFsPath: (relativePath: string) => RouteDetails | undefined;
-    getRouteBySlug: (slug: string) => RouteDetails | undefined;
-    getAllRoutes: () => RouteDetails[];
-    getTemplate: (id: string) => Template | undefined;
-    createTemplate: (template: Template) => Template;
+    getRouteByFsPath: (relativePath: string) => RouteDetails<PageStaticData, import("../shared/types.js").PageProps> | undefined;
+    getRouteBySlug: (slug: string) => RouteDetails<PageStaticData, import("../shared/types.js").PageProps> | undefined;
+    getAllRoutes: () => RouteDetails<PageStaticData, import("../shared/types.js").PageProps>[];
+    getTemplate: (id: string) => string | undefined;
+    createTemplate: (id: string, importPath: string) => string;
+    registerServerPropsGetter: (id: string, importPath: string) => string;
+    resolveRouteStaticData(route: RouteDetails, contentProvider: ContentProvider): Promise<{}>;
     clear: () => void;
 }

package/src/types/portal/src/server/utils/fs.d.ts

@@ -1,4 +1,5 @@
 export declare function readFileAsStringSync(filePath: string): string | null | undefined;
 export declare function readFileNames(dir: string): string[];
-export declare function copyStaticFile(absolutePath: string, outdir: string): string;
+export declare function copyStaticFile(absolutePath: string, outdir: string): string | undefined;
+export declare function copyFolderRecursiveSync(source: string, target: string): void;
 export declare function ensureDir(path: string): string;

package/src/types/portal/src/server/utils/index.d.ts

@@ -3,3 +3,4 @@ export * from './crypto.js';
 export * from './fs.js';
 export * from './reporter/reporter.js';
 export * from './paths.js';
+export * from './rbac.js';

package/src/types/portal/src/server/utils/paths.d.ts

@@ -1,4 +1,6 @@
+import { OpenAPIDefinition } from '@redocly/reference-docs';
 import type { ContentProvider } from '../content/content-provider.js';
+import { Route } from '../dev-server/types';
 export declare function getDataFromRelativePath(relativePath: string): {
     pathVersion: string | null;
     basePath: string;
@@ -11,3 +13,5 @@ export declare function excludeVersion<T extends string[] | string>(arg: T): {
     version?: string;
     data: T;
 };
+export declare function getParamsFromPath(path: string, route: Route): Record<string, string>;
+export declare function getDefinitionFiles(contentProvider: ContentProvider): Promise<Map<string, OpenAPIDefinition>>;

package/src/types/portal/src/server/utils/rbac.d.ts

@@ -0,0 +1,15 @@
+import { Store } from '../store';
+import { PERMISSION_PROP_NAME } from '../../shared/constants.js';
+export declare function canAccessResource<T extends {
+    [PERMISSION_PROP_NAME]?: string;
+}>(resource: T, permissions: Set<string>): boolean;
+export declare function getPermissionsForRoles(store: Pick<Store, 'getRbacPermissionsByRole'>, roles: string[]): Set<string>;
+export declare function getUserRolesFromCookies(cookies?: string): string[];
+/**
+ * Maps the input deep and removes objects that have a 'permission' prop
+ * but do not match the input permissions list
+ * @param input can be object, array, string or any other value
+ * @param permissions
+ * @returns
+ */
+export declare function filterDataByAccessDeep(input: any, permissions: Set<string>): any;

package/src/types/portal/src/shared/constants.d.ts

@@ -1,10 +1,17 @@
 export declare const RUNTIME_RESOURCES_DIR = "runtime";
 export declare const REDOC_OVERVIEW_ITEM_ID = "overview";
 export declare const PORTAL_CUSTOM_THEMES_FOLDER = "@theme";
+export declare const DEFAULT_THEME_NAME = "@redocly/theme";
 export declare const CUSTOM_MARKDOC_OPTIONS_PATH = "markdoc";
 export declare const CUSTOM_MARKDOC_TAGS_PATH = "tags";
 export declare const USER_THEME_ALIAS = "@theme";
+export declare const PUBLIC_ASSETS_FOLDER = "/assets";
 export declare const PUBLIC_STATIC_FOLDER = "/static";
+export declare const THEME_ASSETS_FOLDER = "theme-assets";
+export declare const PERMISSION_PROP_NAME = "redocly::permission";
+export declare const OIDC_CALLBACK_ROUTE_PATH = "/_auth/oidc";
+export declare const DEFAULT_OIDC_SCOPES = "openid";
 export declare enum FsErrors {
     NotExist = "ENOENT"
 }
+export declare const INTERNALLY_IGNORED_FILES: string[];

package/src/types/portal/src/shared/models/config.d.ts

@@ -1,9 +1,28 @@
-import { RawNavItem, LogoConfig, ResolvedNavItem } from '../types';
+import { RawNavItem, LogoConfig } from '../types';
+declare type RawNavConfig = RawNavItem[] | Record<string, RawNavItem[] | {
+    items: RawNavItem[];
+} | string>;
+export declare type AuthProviderConfig = {
+    type: string;
+    configurationUrl: string;
+    clientId: string;
+    clientSecret: string;
+    rolesClaimName: string;
+    scopes?: Array<string>;
+};
+export declare type AuthIdpsConfig = {
+    main: AuthProviderConfig;
+};
+export declare type AuthConfig = {
+    idps: AuthIdpsConfig;
+};
 export interface PortalConfig extends Record<string, any> {
-    nav?: RawNavItem[];
+    nav?: RawNavConfig;
     logo?: LogoConfig;
     themes?: RawTheme[];
-    footer?: FooterConfig;
+    footer?: RawNavConfig;
+    auth?: AuthConfig;
+    frontmatterKeysToResolve?: string[];
 }
 export interface RawTheme {
     name: string;
@@ -11,18 +30,11 @@ export interface RawTheme {
 }
 export interface ResolvedTheme extends RawTheme {
     stylesFile?: string;
+    path: string;
     markdoc: {
         nodesFiles: string[];
         tagsFiles: string[];
         componentsFile?: string;
     };
 }
-export interface FooterConfig {
-    copyrightText?: string;
-    columns?: FooterColumn[];
-}
-export interface FooterColumn {
-    group: string;
-    label?: string;
-    items: ResolvedNavItem[];
-}
+export {};

package/src/types/portal/src/shared/types.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { PERMISSION_PROP_NAME } from './constants';
 export declare type ResolvedNavLinkItem = {
     type: 'link';
     link: string;
@@ -12,6 +13,7 @@ export declare type ResolvedNavLinkItem = {
     separatorLine?: boolean;
     routeSlug?: string;
     active?: boolean;
+    [PERMISSION_PROP_NAME]?: string;
 };
 export declare type ResolvedNavGroupItem = {
     type: 'group';
@@ -25,6 +27,7 @@ export declare type ResolvedNavGroupItem = {
     separatorLine?: boolean;
     routeSlug?: string;
     active?: boolean;
+    [PERMISSION_PROP_NAME]?: string;
 };
 export declare type ResolvedNavItem = ResolvedNavLinkItem | ResolvedNavGroupItem | {
     type: 'separator';
@@ -35,6 +38,7 @@ export declare type ResolvedNavItem = ResolvedNavLinkItem | ResolvedNavGroupItem
     separatorLine?: boolean;
     link?: undefined;
     items?: ResolvedNavItem[];
+    [PERMISSION_PROP_NAME]?: string;
 } | {
     type: 'error';
     version?: string;
@@ -43,23 +47,30 @@ export declare type ResolvedNavItem = ResolvedNavLinkItem | ResolvedNavGroupItem
     label: string;
     link?: undefined;
     items?: ResolvedNavItem[];
+    [PERMISSION_PROP_NAME]?: string;
 };
 export declare type ResolvedNavItemWithLink = (ResolvedNavLinkItem | ResolvedNavGroupItem) & {
     link: string;
 };
 export declare type ResolvedSidebar = ResolvedNavItem[];
 export interface PageProps {
-    seo: {
+    seo?: {
         title: string;
     };
-    versions?: Version[];
-    frontmatter?: Omit<PageProps, 'frontmatter'>;
+    frontmatter?: Omit<PageProps, 'frontmatter'> & {
+        settings?: any;
+    };
+    [k: string]: any;
+}
+export interface PageStaticData {
+    props?: PageProps;
     [k: string]: unknown;
 }
 export interface PageData {
     templateId: string;
     sharedDataIds: Record<string, string>;
     props: PageProps;
+    versions?: Version[];
 }
 export interface CachedPageData extends PageData {
     Template: React.ComponentType<{
@@ -117,6 +128,8 @@ export declare type VersionedFolderConfig = {
     versions: VersionConfigItem[];
     hasVersionsConfig?: boolean;
 };
-export declare type NavGroup = ResolvedNavItem[] | undefined | string;
+export declare type NavGroup = ResolvedNavItem[] | undefined | string | boolean | number;
 export declare type NavGroupRecord = Record<string, NavGroup>;
 export declare type ResolvedConfigLinks = NavGroup | NavGroupRecord;
+export declare type RawNavConfigItem = RawNavItem | RawNavItem[] | string | undefined | boolean | number;
+export declare type RawNavConfig = RawNavConfigItem | Record<string, RawNavConfigItem>;

package/src/types/portal/src/shared/urls.d.ts

@@ -1,10 +1,10 @@
 export declare function getPageDataUrl(normalizedRoute: string): string;
 export declare function getClientPageDataUrl(normalizedRoute: string): string;
-export declare function getSidebarUrl(id: string): string;
 export declare function getSharedDataUrl(id: string): string;
 export declare const GLOBAL_DATA_URL = "/app-data.json";
 export declare const SEARCH_DATA_URL = "/search-data.json";
 export declare const SEARCH_INDEX_URL = "/search-index.json";
+export declare const EJECT_COMPONENT_URL = "/eject-component";
 export declare function combineUrls(baseURL: string, ...relativeURLs: string[]): string;
 export declare function withPathPrefix(url: string): string;
 export declare function withoutHash(url: string): string;

package/src/types/portal/src/shared/utils.d.ts

@@ -14,3 +14,5 @@ export declare function getGlobMatcher(glob: Glob, options?: {}): (file: string)
 export declare function isTag(value?: any): value is Tag;
 export declare function isNode(value?: any): value is Node;
 export declare const getCssPropertyValue: (name: string) => string;
+export declare function normalizeRoute(route: string): string;
+export declare function isPrimitive(arg: any): arg is string | boolean | number;

package/src/ui/Burger.tsx

@@ -0,0 +1,36 @@
+import React, { MouseEventHandler } from 'react';
+import styled from 'styled-components';
+
+export interface BurgerProps {
+  onClick: MouseEventHandler;
+  className?: string;
+}
+
+function BurgerComponent({ onClick, className }: BurgerProps): JSX.Element {
+  return (
+    <Button onClick={onClick} className={className} data-component-name="ui/Burger">
+      <Line></Line>
+      <Line></Line>
+      <Line></Line>
+    </Button>
+  );
+}
+
+const Button = styled.button`
+  all: unset;
+  max-width: 30px;
+  width: 100%;
+  min-width: 10px;
+  display: block;
+  cursor: pointer;
+`;
+
+const Line = styled.div`
+  margin: 4px 0;
+  width: 100%;
+  height: 2px;
+  background: #fff;
+  border-radius: 1px;
+`;
+
+export const Burger = styled(BurgerComponent)``;

package/src/ui/Flex.tsx

@@ -8,6 +8,7 @@ export interface FlexProps extends FlexboxProps, WidthProps {}
 
 export const Flex = styled(Box).attrs({ 'data-component-name': 'ui/Flex' })<FlexProps>`
   display: flex;
+  flex-wrap: wrap;
   ${flexbox}
   ${width}
 `;

package/src/utils/args-typecheck.ts

@@ -0,0 +1,9 @@
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function isEmptyArray(items: any): boolean {
+  return Array.isArray(items) && !items?.length;
+}
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function isPrimitive(arg: any): boolean {
+  return ['string', 'boolean', 'number'].includes(typeof arg);
+}

package/src/utils/highlight.ts

@@ -22,6 +22,7 @@ import 'prismjs/components/prism-swift.js';
 import 'prismjs/components/prism-graphql.js';
 
 const DEFAULT_LANG = 'clike';
+const NEW_LINE_EXP = /\n(?!$)/g;
 
 Prism.languages.insertBefore(
   'javascript',
@@ -79,3 +80,13 @@ export function highlight(source: string | number | boolean, lang: string = DEFA
   }
   return Prism.highlight(source.toString(), grammar, lang);
 }
+
+export function addLineNumbers(highlightedCode: string, start = 1): string {
+  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');
+}

package/src/utils/index.ts

@@ -5,3 +5,4 @@ export * from './jsonToHtml';
 export * from './media-css';
 export * from './theme-helpers';
 export * from './class-names';
+export * from './args-typecheck';

package/src/utils/jsonToHtml.ts

@@ -1,12 +1,21 @@
 // Moved from reference-docs
-let level = 1;
+let level = 0;
+let line = 1;
 
-export function jsonToHTML(json: JSON | Record<string, unknown>, maxExpandLevel: number): string {
-  level = 1;
+type ValueContext = 'array' | 'object' | 'root';
+type LineGenerator = Generator<string, string | void, void>;
+type JsonValue = JSON | Record<string, unknown>;
+
+const ellipsis = '<span class="ellipsis"></span>';
+const colon = '<span class="colon">: </span>';
+
+export function jsonToHTML(json: JsonValue, maxExpandLevel: number, startLine = 1): string {
+  level = 0;
+  line = startLine;
   let output = '';
   output += '<div data-cy="json-sample" class="redoc-json">';
   output += '<code>';
-  output += valueToHTML(json, maxExpandLevel);
+  output += getLines(json, maxExpandLevel);
   output += '</code>';
   output += '</div>';
   return output;
@@ -35,88 +44,191 @@ function punctuation(val: any) {
   return '<span class="token punctuation">' + val + '</span>';
 }
 
-function valueToHTML(value: any, maxExpandLevel: number) {
+function collapser(maxExpandLevel: number): string {
+  const collapsed = level > maxExpandLevel ? 'expand' : 'collapse';
+
+  return `<button class="collapser" aria-label="${collapsed}"></button>`;
+}
+
+export function getLines(json: JsonValue, maxExpandLevel: number): string {
+  const collapsibleLines = [];
+  const lines = valueToHTML(json, maxExpandLevel, 'root');
+
+  let nextLine = lines.next();
+
+  while (!nextLine.done) {
+    collapsibleLines.push(nextLine.value);
+    nextLine = lines.next();
+  }
+
+  collapsibleLines.push(nextLine.value);
+
+  return collapsibleLines.join('\n');
+}
+
+function* valueToHTML(value: any, maxExpandLevel: number, context: ValueContext) {
   const valueType = typeof value;
-  let output = '';
+
   if (value === undefined || value === null) {
-    output += decorateWithSpan('null', 'token keyword');
+    return decorateWithSpan('null', 'token keyword');
   } else if (value && value.constructor === Array) {
+    const length = typeof value.length === 'number' ? value.length : 0;
+
+    if (!length) {
+      return punctuation('[ ]');
+    }
+
     level++;
-    output += arrayToHTML(value, maxExpandLevel);
+
+    yield context === 'root'
+      ? `<span data-line="${line++}">${punctuation('[')}</span>`
+      : punctuation('[');
+
+    for (const line of arrayToHTML(value, length, maxExpandLevel)) {
+      yield line;
+    }
+
     level--;
+
+    return `<span data-line="${line++}">${punctuation(']')}</span>`;
   } else if (value && value.constructor === Date) {
-    output += decorateWithSpan('"' + value.toISOString() + '"', 'token string');
+    return decorateWithSpan('"' + value.toISOString() + '"', 'token string');
   } else if (valueType === 'object') {
+    const keys = Object.keys(value);
+
+    if (!keys.length) {
+      return punctuation('{ }');
+    }
+
     level++;
-    output += objectToHTML(value, maxExpandLevel);
+
+    yield context === 'root'
+      ? `<span data-line="${line++}">${punctuation('{')}</span>`
+      : punctuation('{');
+
+    for (const line of objectToHTML(value, keys, maxExpandLevel)) {
+      yield line;
+    }
+
     level--;
+
+    return `<span data-line="${line++}">${punctuation('}')}</span>`;
   } else if (valueType === 'number') {
-    output += decorateWithSpan(value, 'token number');
+    return decorateWithSpan(value, 'token number');
   } else if (valueType === 'string') {
     if (/^(http|https):\/\/[^\s]+$/.test(value)) {
-      output +=
+      return (
         decorateWithSpan('"', 'token string') +
-        '<a href="' +
-        encodeURI(value) +
-        '">' +
+        `<a href="${encodeURI(value)}">` +
         htmlEncode(stringifyStringLiteral(value)) +
         '</a>' +
-        decorateWithSpan('"', 'token string');
+        decorateWithSpan('"', 'token string')
+      );
     } else {
-      output += decorateWithSpan('"' + stringifyStringLiteral(value) + '"', 'token string');
+      return decorateWithSpan('"' + stringifyStringLiteral(value) + '"', 'token string');
     }
   } else if (valueType === 'boolean') {
-    output += decorateWithSpan(value, 'token boolean');
+    return decorateWithSpan(value, 'token boolean');
   }
+}
 
-  return output;
+function getLineTemplate({
+  isFirstKey,
+  isLastKey,
+  nextLine,
+  context,
+  lineTemplate,
+  maxExpandLevel,
+}: {
+  isFirstKey: boolean;
+  isLastKey: boolean;
+  nextLine: IteratorResult<string, string | undefined>;
+  maxExpandLevel: number;
+  lineTemplate: string;
+  context: 'array' | 'obj';
+}) {
+  let lineValue = isFirstKey ? `${ellipsis}<span class="${context} collapsible">` : '';
+  // Create hoverable
+  lineValue += `<span data-line="${line++}" class="${
+    level > maxExpandLevel ? 'hoverable collapsed' : 'hoverable'
+  }">`;
+  // Add collapser button if item has nested lines
+  lineValue += (!nextLine.done && collapser(maxExpandLevel)) || '';
+  lineValue += lineTemplate;
+  lineValue += nextLine.value;
+  // Add punctuation in case we dont have more nested lines and it is not last item
+  lineValue += nextLine.done && !isLastKey ? punctuation(',') : '';
+  // Close hoverable if we dont have nested lines
+  lineValue += nextLine.done ? '</span>' : '';
+  // Close collapsible if value is single line and we are on last item
+  lineValue += nextLine.done && isLastKey ? '</span>' : '';
+
+  return lineValue;
 }
 
-function arrayToHTML(json: any, maxExpandLevel: number) {
-  const collapsed = level > maxExpandLevel ? 'collapsed' : '';
-  let output = `<button class="collapser" aria-label="${
-    level > maxExpandLevel + 1 ? 'expand' : 'collapse'
-  }"></button>${punctuation('[')}<span class="ellipsis"></span><ul class="array collapsible">`;
-  let hasContents = false;
-  const length = json.length;
-  for (let i = 0; i < length; i++) {
-    hasContents = true;
-    output += '<li><div class="hoverable ' + collapsed + '">';
-    output += valueToHTML(json[i], maxExpandLevel);
-    if (i < length - 1) {
-      output += ',';
+function* arrayToHTML(array: any[], arrayLength: number, maxExpandLevel: number): LineGenerator {
+  for (let i = 0; i < arrayLength; i++) {
+    const lines = valueToHTML(array[i], maxExpandLevel, 'array');
+    const isFirstKey = i === 0;
+    const isLastKey = i === arrayLength - 1;
+    let nextLine = lines.next();
+
+    yield getLineTemplate({
+      context: 'array',
+      isFirstKey,
+      isLastKey,
+      nextLine,
+      lineTemplate: '',
+      maxExpandLevel,
+    });
+
+    nextLine = lines.next();
+
+    while (!nextLine.done) {
+      yield nextLine.value;
+
+      nextLine = lines.next();
+    }
+
+    if (nextLine.value) {
+      // Close hoverable and collapsible (if last array item)
+      yield `${nextLine.value}${i < arrayLength - 1 ? punctuation(',') : '</span>'}</span>`;
     }
-    output += '</div></li>';
-  }
-  output += `</ul>${punctuation(']')}`;
-  if (!hasContents) {
-    output = punctuation('[ ]');
   }
-  return output;
 }
 
-function objectToHTML(json: any, maxExpandLevel: number) {
-  const collapsed = level > maxExpandLevel ? 'collapsed' : '';
-  const keys = Object.keys(json);
-  const length = keys.length;
-  let output = `<button class="collapser" aria-label="${
-    level > maxExpandLevel + 1 ? 'expand' : 'collapse'
-  }"></button>${punctuation('{')}<span class="ellipsis"></span><ul class="obj collapsible">`;
-  let hasContents = false;
-  for (let i = 0; i < length; i++) {
+function* objectToHTML(
+  object: Record<any, any>,
+  keys: any[],
+  maxExpandLevel: number,
+): LineGenerator {
+  for (let i = 0; i < keys.length; i++) {
     const key = keys[i];
-    hasContents = true;
-    output += '<li><div class="hoverable ' + collapsed + '">';
-    output += '<span class="property token string">"' + htmlEncode(key) + '"</span>: ';
-    output += valueToHTML(json[key], maxExpandLevel);
-    if (i < length - 1) {
-      output += punctuation(',');
+    const lines = valueToHTML(object[key], maxExpandLevel, 'object');
+    const isFirstKey = i === 0;
+    const isLastKey = i === keys.length - 1;
+
+    let nextLine = lines.next();
+
+    yield getLineTemplate({
+      context: 'obj',
+      isFirstKey,
+      isLastKey,
+      nextLine,
+      lineTemplate: `<span class="property token string">"${htmlEncode(key)}"</span>${colon}`,
+      maxExpandLevel,
+    });
+
+    nextLine = lines.next();
+
+    while (!nextLine.done) {
+      yield nextLine.value;
+      nextLine = lines.next();
+    }
+
+    if (nextLine.value) {
+      // Close hoverable and collapsible (if last field)
+      yield `${nextLine.value}${isLastKey ? '</span>' : punctuation(',')}</span>`;
     }
-    output += '</div></li>';
-  }
-  output += `</ul>${punctuation('}')}`;
-  if (!hasContents) {
-    output = punctuation('{ }');
   }
-  return output;
 }

package/ui/Burger.d.ts

@@ -0,0 +1,8 @@
+import { MouseEventHandler } from 'react';
+export interface BurgerProps {
+    onClick: MouseEventHandler;
+    className?: string;
+}
+declare function BurgerComponent({ onClick, className }: BurgerProps): JSX.Element;
+export declare const Burger: import("styled-components").StyledComponent<typeof BurgerComponent, any, {}, never>;
+export {};

package/ui/Burger.js

@@ -0,0 +1,23 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Burger = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+function BurgerComponent(_a) {
+    var onClick = _a.onClick, className = _a.className;
+    return (react_1.default.createElement(Button, { onClick: onClick, className: className, "data-component-name": "ui/Burger" },
+        react_1.default.createElement(Line, null),
+        react_1.default.createElement(Line, null),
+        react_1.default.createElement(Line, null)));
+}
+var Button = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  all: unset;\n  max-width: 30px;\n  width: 100%;\n  min-width: 10px;\n  display: block;\n  cursor: pointer;\n"], ["\n  all: unset;\n  max-width: 30px;\n  width: 100%;\n  min-width: 10px;\n  display: block;\n  cursor: pointer;\n"])));
+var Line = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 4px 0;\n  width: 100%;\n  height: 2px;\n  background: #fff;\n  border-radius: 1px;\n"], ["\n  margin: 4px 0;\n  width: 100%;\n  height: 2px;\n  background: #fff;\n  border-radius: 1px;\n"])));
+exports.Burger = (0, styled_components_1.default)(BurgerComponent)(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
+var templateObject_1, templateObject_2, templateObject_3;