@redocly/theme 0.9.13 → 0.9.15

package/lib/config.js

@@ -1,216 +1,278 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeConfig = void 0;
-const zod_1 = require("zod");
-const LogoConfig = zod_1.z
-    .object({
-    image: zod_1.z.string().optional(),
-    altText: zod_1.z.string().optional(),
-    link: zod_1.z.string().optional(),
-    favicon: zod_1.z.string().optional(),
-})
-    .strict();
-const HideConfig = zod_1.z.object({
-    hide: zod_1.z.boolean().optional(),
-});
-const ScriptConfig = zod_1.z
-    .object({
-    src: zod_1.z.string(),
-    async: zod_1.z.boolean().optional(),
-    crossorigin: zod_1.z.string().optional(),
-    defer: zod_1.z.boolean().optional(),
-    fetchpriority: zod_1.z.string().optional(),
-    integrity: zod_1.z.string().optional(),
-    module: zod_1.z.boolean().optional(),
-    nomodule: zod_1.z.boolean().optional(),
-    nonce: zod_1.z.string().optional(),
-    referrerpolicy: zod_1.z.string().optional(),
-    type: zod_1.z.string().optional(),
-})
-    .passthrough();
-const LinksConfig = zod_1.z
-    .object({
-    href: zod_1.z.string(),
-    as: zod_1.z.string().optional(),
-    crossorigin: zod_1.z.string().optional(),
-    fetchpriority: zod_1.z.string().optional(),
-    hreflang: zod_1.z.string().optional(),
-    imagesizes: zod_1.z.string().optional(),
-    imagesrcset: zod_1.z.string().optional(),
-    integrity: zod_1.z.string().optional(),
-    media: zod_1.z.string().optional(),
-    prefetch: zod_1.z.string().optional(),
-    referrerpolicy: zod_1.z.string().optional(),
-    rel: zod_1.z.string().optional(),
-    sizes: zod_1.z.string().optional(),
-    title: zod_1.z.string().optional(),
-    type: zod_1.z.string().optional(),
-})
-    .passthrough();
-const MarkdownConfig = zod_1.z
-    .object({
-    frontMatterKeysToResolve: zod_1.z.array(zod_1.z.string()).default(['image', 'links']).optional(),
-    lastUpdatedBlock: zod_1.z
-        .object({
-        format: zod_1.z.enum(['timeago', 'iso', 'long', 'short']).default('timeago').optional(),
-        locale: zod_1.z.string().default('en-US').optional(),
-    })
-        .extend(HideConfig.shape)
-        .default({})
-        .optional(),
-    toc: zod_1.z
-        .object({
-        header: zod_1.z.string().default('On this page').optional(),
-        depth: zod_1.z.number().default(3).optional(),
-    })
-        .extend(HideConfig.shape)
-        .optional()
-        .default({}),
-    editPage: zod_1.z
-        .object({
-        baseUrl: zod_1.z.string().optional(),
-        icon: zod_1.z.string().optional(),
-        text: zod_1.z.string().optional().default('Edit this page'),
-    })
-        .extend(HideConfig.shape)
-        .default({})
-        .optional(),
-})
-    .strict()
-    .default({});
-exports.ThemeConfig = zod_1.z
-    .object({
-    imports: zod_1.z.array(zod_1.z.string()).default([]).optional(),
-    logo: LogoConfig.optional(),
-    navbar: zod_1.z
-        .object({
-        items: zod_1.z.array(zod_1.z.any()).optional(), // todo: think about validation here
-    })
-        .extend(HideConfig.shape)
-        .strict()
-        .optional(),
-    footer: zod_1.z
-        .object({
-        items: zod_1.z.array(zod_1.z.any()).optional(),
-        copyrightText: zod_1.z.string().optional(),
-    })
-        .extend(HideConfig.shape)
-        .strict()
-        .optional(),
-    sidebar: HideConfig.strict().optional(),
-    scripts: zod_1.z
-        .object({
-        head: zod_1.z.array(ScriptConfig).optional(),
-        body: zod_1.z.array(ScriptConfig).optional(),
-    })
-        .optional(),
-    links: zod_1.z.array(LinksConfig).optional(),
-    feedback: zod_1.z
-        .object({
-        type: zod_1.z.enum(['rating', 'sentiment', 'comment', 'reasons']).default('sentiment'),
-        settings: zod_1.z
-            .object({
-            label: zod_1.z.string().optional(),
-            submitText: zod_1.z.string().optional(),
-            max: zod_1.z.number().optional(),
-            buttonText: zod_1.z.string().optional(),
-            multi: zod_1.z.boolean().optional(),
-            items: zod_1.z.array(zod_1.z.string()).min(1).optional(),
-            reasons: zod_1.z
-                .object({
-                enable: zod_1.z.boolean().default(true),
-                multi: zod_1.z.boolean().optional(),
-                label: zod_1.z.string().optional(),
-                items: zod_1.z.array(zod_1.z.string()),
-            })
-                .optional(),
-            comment: zod_1.z
-                .object({
-                enable: zod_1.z.boolean().default(true),
-                label: zod_1.z.string().optional(),
-                likeLabel: zod_1.z.string().optional(),
-                dislikeLabel: zod_1.z.string().optional(),
-            })
-                .optional(),
-        })
-            .optional(),
-    })
-        .extend(HideConfig.shape)
-        .strict()
-        .default({})
-        .optional(),
-    search: zod_1.z
-        .object({
-        placement: zod_1.z.string().default('navbar').optional(),
-        shortcuts: zod_1.z.array(zod_1.z.string()).default(['/']).optional(),
-    })
-        .extend(HideConfig.shape)
-        .strict()
-        .default({})
-        .optional(),
-    colorMode: zod_1.z
-        .object({
-        ignoreDetection: zod_1.z.boolean().optional(),
-        modes: zod_1.z.array(zod_1.z.string()).default(['light', 'dark']).optional(),
-    })
-        .extend(HideConfig.shape)
-        .strict()
-        .optional()
-        .default({}),
-    navigation: zod_1.z
-        .object({
-        nextButton: zod_1.z
-            .object({ text: zod_1.z.string().default('Next to {label}') })
-            .extend(HideConfig.shape)
-            .optional()
-            .default({}),
-        previousButton: zod_1.z
-            .object({ text: zod_1.z.string().default('Back to {label}') })
-            .extend(HideConfig.shape)
-            .optional()
-            .default({}),
-    })
-        .strict()
-        .optional()
-        .default({}),
-    codeSnippet: zod_1.z
-        .object({
-        copy: zod_1.z
-            .object({
-            buttonText: zod_1.z.string().default('Copy').optional(),
-            tooltipText: zod_1.z.string().default('Copy to clipboard').optional(),
-            toasterText: zod_1.z.string().default('Copied!').optional(),
-            toasterDuration: zod_1.z.number().default(1500).optional(),
-        })
-            .extend(HideConfig.shape)
-            .optional()
-            .default({}),
-        report: zod_1.z
-            .object({
-            tooltipText: zod_1.z.string().default('Report a problem').optional(),
-            label: zod_1.z.string().optional(),
-        })
-            .extend(HideConfig.shape)
-            .optional()
-            .default({ hide: true }),
-    })
-        .strict()
-        .default({})
-        .optional(),
-    markdown: MarkdownConfig.optional(),
-    openapi: zod_1.z.object({}).passthrough().optional(),
-    graphql: zod_1.z.object({}).passthrough().optional(),
-    analytics: zod_1.z.any().optional(),
-    userProfile: zod_1.z
-        .object({
-        loginLabel: zod_1.z.string().default('Login').optional(),
-        logoutLabel: zod_1.z.string().default('Logout').optional(),
-        menu: zod_1.z.array(zod_1.z.any()).optional(), // should be same as navbar items type
-    })
-        .extend(HideConfig.shape)
-        .optional()
-        .default({}),
-})
-    .passthrough()
-    .default({});
+exports.themeConfigSchema = void 0;
+const logoConfigSchema = {
+    type: 'object',
+    properties: {
+        image: { type: 'string' },
+        altText: { type: 'string' },
+        link: { type: 'string' },
+        favicon: { type: 'string' },
+    },
+    additionalProperties: false,
+};
+const hideConfigSchema = {
+    type: 'object',
+    properties: {
+        hide: { type: 'boolean' },
+    },
+    additionalProperties: false,
+};
+const scriptConfigSchema = {
+    type: 'object',
+    properties: {
+        src: { type: 'string' },
+        async: { type: 'boolean' },
+        crossorigin: { type: 'string' },
+        defer: { type: 'boolean' },
+        fetchpriority: { type: 'string' },
+        integrity: { type: 'string' },
+        module: { type: 'boolean' },
+        nomodule: { type: 'boolean' },
+        nonce: { type: 'string' },
+        referrerpolicy: { type: 'string' },
+        type: { type: 'string' },
+    },
+    required: ['src'],
+    additionalProperties: true,
+};
+const linksConfigSchema = {
+    type: 'object',
+    properties: {
+        href: { type: 'string' },
+        as: { type: 'string' },
+        crossorigin: { type: 'string' },
+        fetchpriority: { type: 'string' },
+        hreflang: { type: 'string' },
+        imagesizes: { type: 'string' },
+        imagesrcset: { type: 'string' },
+        integrity: { type: 'string' },
+        media: { type: 'string' },
+        prefetch: { type: 'string' },
+        referrerpolicy: { type: 'string' },
+        rel: { type: 'string' },
+        sizes: { type: 'string' },
+        title: { type: 'string' },
+        type: { type: 'string' },
+    },
+    required: ['href'],
+    additionalProperties: true,
+};
+const markdownConfigSchema = {
+    type: 'object',
+    properties: {
+        frontMatterKeysToResolve: {
+            type: 'array',
+            items: { type: 'string' },
+            default: ['image', 'links'],
+        },
+        lastUpdatedBlock: {
+            type: 'object',
+            properties: Object.assign({ format: {
+                    type: 'string',
+                    enum: ['timeago', 'iso', 'long', 'short'],
+                    default: 'timeago',
+                }, locale: { type: 'string', default: 'en-US' } }, hideConfigSchema.properties),
+            additionalProperties: false,
+            default: {},
+        },
+        toc: {
+            type: 'object',
+            properties: Object.assign({ header: { type: 'string', default: 'On this page' }, depth: { type: 'number', default: 3 } }, hideConfigSchema.properties),
+            additionalProperties: false,
+            default: {},
+        },
+        editPage: {
+            type: 'object',
+            properties: Object.assign({ baseUrl: { type: 'string' }, icon: { type: 'string' }, text: { type: 'string', default: 'Edit this page' } }, hideConfigSchema.properties),
+            additionalProperties: false,
+            default: {},
+        },
+    },
+    additionalProperties: false,
+    default: {},
+};
+const navItemSchema = {
+    type: 'object',
+    properties: {
+        page: { type: 'string' },
+        directory: { type: 'string' },
+        group: { type: 'string' },
+        label: { type: 'string' },
+        separator: { type: 'string' },
+        separatorLine: { type: 'boolean' },
+        version: { type: 'string' },
+        menuStyle: { type: 'string', enum: ['drilldown'] },
+        expanded: { type: 'string', const: 'always' },
+        selectFirstItemOnExpand: { type: 'boolean' },
+        flatten: { type: 'boolean' },
+    },
+};
+const navItemsSchema = {
+    type: 'array',
+    items: Object.assign(Object.assign({}, navItemSchema), { properties: Object.assign(Object.assign({}, navItemSchema.properties), { items: { type: 'array', items: navItemSchema } }) }),
+};
+exports.themeConfigSchema = {
+    type: 'object',
+    properties: {
+        imports: {
+            type: 'array',
+            items: { type: 'string' },
+            default: [],
+        },
+        logo: logoConfigSchema,
+        navbar: {
+            type: 'object',
+            properties: Object.assign({ items: navItemsSchema }, hideConfigSchema.properties),
+            additionalProperties: false,
+        },
+        footer: {
+            type: 'object',
+            properties: Object.assign({ items: navItemsSchema, copyrightText: { type: 'string' } }, hideConfigSchema.properties),
+            additionalProperties: false,
+        },
+        sidebar: hideConfigSchema,
+        scripts: {
+            type: 'object',
+            properties: {
+                head: { type: 'array', items: scriptConfigSchema },
+                body: { type: 'array', items: scriptConfigSchema },
+            },
+            additionalProperties: false,
+        },
+        links: { type: 'array', items: linksConfigSchema },
+        feedback: {
+            type: 'object',
+            properties: {
+                hide: {
+                    type: 'boolean',
+                    default: false,
+                },
+                type: {
+                    type: 'string',
+                    enum: ['rating', 'sentiment', 'comment', 'reasons'],
+                    default: 'sentiment',
+                },
+                settings: Object.assign({ type: 'object', properties: {
+                        label: { type: 'string' },
+                        submitText: { type: 'string' },
+                        max: { type: 'number' },
+                        buttonText: { type: 'string' },
+                        multi: { type: 'boolean' },
+                        items: { type: 'array', items: { type: 'string' }, minItems: 1 },
+                        reasons: {
+                            type: 'object',
+                            properties: {
+                                enable: { type: 'boolean', default: true },
+                                multi: { type: 'boolean' },
+                                label: { type: 'string' },
+                                items: { type: 'array', items: { type: 'string' } },
+                            },
+                            additionalProperties: false,
+                        },
+                        comment: {
+                            type: 'object',
+                            properties: {
+                                enable: { type: 'boolean', default: true },
+                                label: { type: 'string' },
+                                likeLabel: { type: 'string' },
+                                dislikeLabel: { type: 'string' },
+                            },
+                            additionalProperties: false,
+                        },
+                    }, additionalProperties: false }, hideConfigSchema.properties),
+            },
+            additionalProperties: false,
+            default: {},
+        },
+        search: {
+            type: 'object',
+            properties: Object.assign({ placement: {
+                    type: 'string',
+                    default: 'navbar',
+                }, shortcuts: {
+                    type: 'array',
+                    items: { type: 'string' },
+                    default: ['/'],
+                } }, hideConfigSchema.properties),
+            additionalProperties: false,
+            default: {},
+        },
+        colorMode: {
+            type: 'object',
+            properties: Object.assign({ ignoreDetection: { type: 'boolean' }, modes: {
+                    type: 'array',
+                    items: { type: 'string' },
+                    default: ['light', 'dark'],
+                } }, hideConfigSchema.properties),
+            additionalProperties: false,
+            default: {},
+        },
+        navigation: {
+            type: 'object',
+            properties: {
+                nextButton: {
+                    type: 'object',
+                    properties: Object.assign({ text: { type: 'string', default: 'Next to {label}' } }, hideConfigSchema.properties),
+                    additionalProperties: false,
+                    default: {},
+                },
+                previousButton: {
+                    type: 'object',
+                    properties: Object.assign({ text: { type: 'string', default: 'Back to {label}' } }, hideConfigSchema.properties),
+                    additionalProperties: false,
+                    default: {},
+                },
+            },
+            additionalProperties: false,
+            default: {},
+        },
+        codeSnippet: {
+            type: 'object',
+            properties: {
+                copy: {
+                    type: 'object',
+                    properties: Object.assign({ buttonText: { type: 'string', default: 'Copy' }, tooltipText: { type: 'string', default: 'Copy to clipboard' }, toasterText: { type: 'string', default: 'Copied!' }, toasterDuration: { type: 'number', default: 1500 } }, hideConfigSchema.properties),
+                    additionalProperties: false,
+                    default: {},
+                },
+                report: {
+                    type: 'object',
+                    properties: Object.assign({ tooltipText: { type: 'string', default: 'Report a problem' }, label: { type: 'string' } }, hideConfigSchema.properties),
+                    additionalProperties: false,
+                    default: { hide: true },
+                },
+            },
+            additionalProperties: false,
+            default: {},
+        },
+        markdown: markdownConfigSchema,
+        openapi: { type: 'object', additionalProperties: true },
+        graphql: { type: 'object', additionalProperties: true },
+        analytics: {
+            type: ['array', 'boolean', 'number', 'object', 'string'],
+        },
+        userProfile: {
+            type: 'object',
+            properties: Object.assign({ loginLabel: { type: 'string', default: 'Login' }, logoutLabel: { type: 'string', default: 'Logout' }, menu: {
+                    type: 'array',
+                    items: {
+                        type: 'object',
+                        properties: {
+                            label: { type: 'string' },
+                            external: { type: 'boolean' },
+                            link: { type: 'string' },
+                            separatorLine: { type: 'boolean' },
+                        },
+                        additionalProperties: true,
+                    },
+                    default: [],
+                } }, hideConfigSchema.properties),
+            additionalProperties: false,
+            default: {},
+        },
+    },
+    additionalProperties: true,
+    default: {},
+};
 //# sourceMappingURL=config.js.map

package/lib/globalStyle.js

@@ -505,6 +505,7 @@ const sidebar = (0, styled_components_1.css) `
   --sidebar-item-separator-text-color: var(--sidebar-item-text-color);
   --sidebar-item-separator-background-color: var(--sidebar-background-color);
   --sidebar-item-separator-line-color: var(--border-color); // but has line color
+  --sidebar-item-separator-offset: calc(var(--sidebar-spacing-unit) * 2);
 
   /**
     * @tokens Sidebar back button
@@ -561,7 +562,7 @@ const admonition = (0, styled_components_1.css) `
   * @tokens Admonition type info
   */
 
-  --admonition-info-background-color: var(--color-emphasis-200); // @presenter Color
+  --admonition-info-background-color: var(--color-secondary-200); // @presenter Color
   --admonition-info-heading-text-color: var(--text-color); // @presenter Color
   --admonition-info-text-color: var(--text-color); // @presenter Color
   --admonition-info-icon-color: var(--color-accent-900); // @presenter Color
@@ -1941,7 +1942,7 @@ const pages = (0, styled_components_1.css) `
 const userProfile = (0, styled_components_1.css) `
 
   /**
-  * @tokens User Profile 
+  * @tokens User Profile
   */
 
    --profile-name-font-family: var(--navbar-item-font-family); // @presenter FontFamily
@@ -1949,12 +1950,12 @@ const userProfile = (0, styled_components_1.css) `
    --profile-name-font-weight: var(--font-weight-regular); // @presenter FontWeight
    --profile-name-line-height: var(--line-height-base); // @presenter LineHeight
    --profile-name-text-color: var(--navbar-text-color); // @presenter Color
-   
+
    --profile-name-padding-horizontal: 0; // @presenter Spacing
    --profile-name-padding-vertical: 0; // @presenter Spacing
    --profile-name-margin-horizontal: 0; // @presenter Spacing
 
-   --profile-avatar-width: 40px; 
+   --profile-avatar-width: 40px;
    --profile-avatar-height: 40px;
    --profile-avatar-border-radius: 50%; // @presenter BorderRadius
 
@@ -1982,7 +1983,7 @@ const userProfile = (0, styled_components_1.css) `
    --profile-menu-item-font-weight: var(--font-weight-regular); // @presenter FontWeight
    --profile-menu-item-line-height: var(--line-height-base);  // @presenter LineHeight
    --profile-menu-item-text-align: left;
- 
+
    --profile-menu-item-padding-horizontal: 15px; // @presenter Spacing
    --profile-menu-item-padding-vertical: 20px; // @presenter Spacing
 
@@ -1996,7 +1997,7 @@ const userProfile = (0, styled_components_1.css) `
    --profile-menu-item-separator-line-color: var(--border-color); // @presenter Color
 
    // @tokens End
- 
+
 `;
 const modal = (0, styled_components_1.css) `
   body:has(.modal) {

package/lib/ui/Dropdown.js

@@ -40,10 +40,9 @@ const DropDownHeader = styled_components_1.default.div `
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background: #fff;
   padding: 8px 10px;
   border-radius: 4px;
-  border: 1px solid #e4e7eb;
+  border: 1px solid var(--border-color);
   font-weight: 600;
   color: var(--text-color);
   background: var(--color-secondary-200);
@@ -68,16 +67,16 @@ const IconWrapper = styled_components_1.default.span `
   }
 `;
 const ListItem = styled_components_1.default.div `
-  background-color: #fff;
+  background-color: var(--color-secondary-200);
   padding: 0.4em 10px;
   font-size: 1em;
   color: var(--text-color);
   cursor: pointer;
   &:hover {
-    background-color: rgba(38, 50, 56, 0.12);
+    background-color: var(--color-secondary-300);
   }
   &.active {
-    background-color: rgba(0, 0, 0, 0.05);
+    background-color: var(--color-secondary-300);
   }
 `;
 const DropDownLink = (0, styled_components_1.default)(Link_1.Link) `

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@redocly/theme",
-  "version": "0.9.13",
+  "version": "0.9.15",
   "description": "Shared UI components lib",
+  "keywords": [],
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
   "main": "lib/index.js",
@@ -12,7 +13,6 @@
     "./config": "./lib/config.js",
     ".": "./lib/index.js",
     "./Sidebar/*": "./lib/Sidebar/*.js",
-    "./*": "./lib/index.js",
     "./src/": "./src/"
   },
   "peerDependencies": {
@@ -22,8 +22,7 @@
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.4.4",
     "styled-components": "^5.3.6",
-    "styled-system": "^5.1.5",
-    "zod": ">=3.19.1"
+    "styled-system": "^5.1.5"
   },
   "devDependencies": {
     "@storybook/addon-actions": "^6.5.9",
@@ -58,11 +57,11 @@
     "@typescript-eslint/parser": "^5.23.0",
     "chromatic": "^6.10.2",
     "concurrently": "^7.4.0",
-    "esbuild": "^0.15.11",
     "jest": "^29.2.2",
     "jest-environment-jsdom": "^29.2.2",
     "jest-styled-components": "^7.1.1",
     "jest-when": "^3.5.1",
+    "json-schema-to-ts": "^2.7.2",
     "lodash.throttle": "^4.1.1",
     "npm-run-all": "^4.1.5",
     "react-refresh": "^0.14.0",
@@ -77,10 +76,10 @@
     "tsc-alias": "^1.8.2",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.8.4",
-    "webpack": "^5.72.0",
-    "zod": ">=3.19.1"
+    "webpack": "^5.72.0"
   },
   "dependencies": {
+    "@redocly/ajv": "^8.11.0",
     "copy-to-clipboard": "^3.3.3",
     "highlight-words-core": "^1.2.2",
     "hotkeys-js": "^3.10.1",

package/src/Markdown/MarkdownWrapper.tsx

@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components';
 
 import type { FlattenSimpleInterpolation } from 'styled-components';
 
-import { typography } from '@theme/utils';
+import { typography } from '@theme/utils/theme-helpers';
 
 export const baseTable = css`
   table.md {