@redocly/theme 0.9.12 → 0.9.14

package/src/config.ts

@@ -1,234 +1,346 @@
-import { z } from 'zod';
+import type { FromSchema } from 'json-schema-to-ts';
+import type { MenuStyle } from './types/portal';
 
-const LogoConfig = z
-  .object({
-    image: z.string().optional(),
-    altText: z.string().optional(),
-    link: z.string().optional(),
-    favicon: z.string().optional(),
-  })
-  .strict();
+const logoConfigSchema = {
+  type: 'object',
+  properties: {
+    image: { type: 'string' },
+    altText: { type: 'string' },
+    link: { type: 'string' },
+    favicon: { type: 'string' },
+  },
+  additionalProperties: false,
+} as const;
 
-const HideConfig = z.object({
-  hide: z.boolean().optional(),
-});
+const hideConfigSchema = {
+  type: 'object',
+  properties: {
+    hide: { type: 'boolean' },
+  },
+  additionalProperties: false,
+} as const;
 
-const ScriptConfig = z
-  .object({
-    src: z.string(),
-    async: z.boolean().optional(),
-    crossorigin: z.string().optional(),
-    defer: z.boolean().optional(),
-    fetchpriority: z.string().optional(),
-    integrity: z.string().optional(),
-    module: z.boolean().optional(),
-    nomodule: z.boolean().optional(),
-    nonce: z.string().optional(),
-    referrerpolicy: z.string().optional(),
-    type: z.string().optional(),
-  })
-  .passthrough();
+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,
+} as const;
 
-const LinksConfig = z
-  .object({
-    href: z.string(),
+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,
+} as const;
 
-    as: z.string().optional(),
-    crossorigin: z.string().optional(),
-    fetchpriority: z.string().optional(),
-    hreflang: z.string().optional(),
-    imagesizes: z.string().optional(),
-    imagesrcset: z.string().optional(),
-    integrity: z.string().optional(),
-    media: z.string().optional(),
-    prefetch: z.string().optional(),
-    referrerpolicy: z.string().optional(),
-    rel: z.string().optional(),
-    sizes: z.string().optional(),
-    title: z.string().optional(),
-    type: z.string().optional(),
-  })
-  .passthrough();
+const markdownConfigSchema = {
+  type: 'object',
+  properties: {
+    frontMatterKeysToResolve: {
+      type: 'array',
+      items: { type: 'string' },
+      default: ['image', 'links'],
+    },
+    lastUpdatedBlock: {
+      type: 'object',
+      properties: {
+        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: {
+        header: { type: 'string', default: 'On this page' },
+        depth: { type: 'number', default: 3 },
+        ...hideConfigSchema.properties,
+      },
+      additionalProperties: false,
+      default: {},
+    },
+    editPage: {
+      type: 'object',
+      properties: {
+        baseUrl: { type: 'string' },
+        icon: { type: 'string' },
+        text: { type: 'string', default: 'Edit this page' },
+        ...hideConfigSchema.properties,
+      },
+      additionalProperties: false,
+      default: {},
+    },
+  },
+  additionalProperties: false,
+  default: {},
+} as const;
 
-const MarkdownConfig = z
-  .object({
-    frontMatterKeysToResolve: z.array(z.string()).default(['image', 'links']).optional(),
-    lastUpdatedBlock: z
-      .object({
-        format: z.enum(['timeago', 'iso', 'long', 'short']).default('timeago').optional(),
-        locale: z.string().default('en-US').optional(),
-      })
-      .extend(HideConfig.shape)
-      .default({})
-      .optional(),
-    toc: z
-      .object({
-        header: z.string().default('On this page').optional(),
-        depth: z.number().default(3).optional(),
-      })
-      .extend(HideConfig.shape)
-      .optional()
-      .default({}),
-    editPage: z
-      .object({
-        baseUrl: z.string().optional(),
-        icon: z.string().optional(),
-        text: z.string().optional().default('Edit this page'),
-      })
-      .extend(HideConfig.shape)
-      .default({})
-      .optional(),
-  })
-  .strict()
-  .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' as MenuStyle] },
+    expanded: { type: 'string', const: 'always' },
+    selectFirstItemOnExpand: { type: 'boolean' },
+    flatten: { type: 'boolean' },
+  },
+} as const;
 
-export const ThemeConfig = z
-  .object({
-    imports: z.array(z.string()).default([]).optional(),
+const navItemsSchema = {
+  type: 'array',
+  items: {
+    ...navItemSchema,
+    properties: {
+      ...navItemSchema.properties,
+      items: { type: 'array', items: navItemSchema },
+    },
+  },
+} as const;
 
-    logo: LogoConfig.optional(),
-    navbar: z
-      .object({
-        items: z.array(z.any()).optional(), // todo: think about validation here
-      })
-      .extend(HideConfig.shape)
-      .strict()
-      .optional(),
+export const themeConfigSchema = {
+  type: 'object',
+  properties: {
+    imports: {
+      type: 'array',
+      items: { type: 'string' },
+      default: [],
+    },
+    logo: logoConfigSchema,
+    navbar: {
+      type: 'object',
+      properties: {
+        items: navItemsSchema,
+        ...hideConfigSchema.properties,
+      },
+      additionalProperties: false,
+    },
+    footer: {
+      type: 'object',
+      properties: {
+        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: {
+        type: {
+          type: 'string',
+          enum: ['rating', 'sentiment', 'comment', 'reasons'],
+          default: 'sentiment',
+        },
+        settings: {
+          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: {
+        placement: {
+          type: 'string',
+          default: 'navbar',
+        },
+        shortcuts: {
+          type: 'array',
+          items: { type: 'string' },
+          default: ['/'],
+        },
+        ...hideConfigSchema.properties,
+      },
+      additionalProperties: false,
+      default: {},
+    },
+    colorMode: {
+      type: 'object',
+      properties: {
+        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: {
+            text: { type: 'string', default: 'Next to {label}' },
+            ...hideConfigSchema.properties,
+          },
+          additionalProperties: false,
+          default: {},
+        },
+        previousButton: {
+          type: 'object',
+          properties: {
+            text: { type: 'string', default: 'Back to {label}' },
+            ...hideConfigSchema.properties,
+          },
+          additionalProperties: false,
+          default: {},
+        },
+      },
+      additionalProperties: false,
+      default: {},
+    },
+    codeSnippet: {
+      type: 'object',
+      properties: {
+        copy: {
+          type: 'object',
+          properties: {
+            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: {
+            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: {
+        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: {},
+} as const;
 
-    footer: z
-      .object({
-        items: z.array(z.any()).optional(), // todo: think about validation here
-        copyrightText: z.string().optional(),
-      })
-      .extend(HideConfig.shape)
-      .strict()
-      .optional(),
-    sidebar: HideConfig.strict().optional(),
-
-    scripts: z
-      .object({
-        head: z.array(ScriptConfig).optional(),
-        body: z.array(ScriptConfig).optional(),
-      })
-      .optional(),
-    links: z.array(LinksConfig).optional(),
-
-    feedback: z
-      .object({
-        type: z.enum(['rating', 'sentiment', 'comment', 'reasons']).default('sentiment'),
-        settings: z
-          .object({
-            label: z.string().optional(),
-            submitText: z.string().optional(),
-            max: z.number().optional(),
-            buttonText: z.string().optional(),
-            multi: z.boolean().optional(),
-            items: z.array(z.string()).min(1).optional(),
-            reasons: z
-              .object({
-                enable: z.boolean().default(true),
-                multi: z.boolean().optional(),
-                label: z.string().optional(),
-                items: z.array(z.string()),
-              })
-              .optional(),
-            comment: z
-              .object({
-                enable: z.boolean().default(true),
-                label: z.string().optional(),
-                likeLabel: z.string().optional(),
-                dislikeLabel: z.string().optional(),
-              })
-              .optional(),
-          })
-          .optional(),
-      })
-      .extend(HideConfig.shape)
-      .strict()
-      .default({})
-      .optional(),
-
-    search: z
-      .object({
-        placement: z.string().default('navbar').optional(),
-        shortcuts: z.array(z.string()).default(['/']).optional(),
-      })
-      .extend(HideConfig.shape)
-      .strict()
-      .default({})
-      .optional(),
-
-    colorMode: z
-      .object({
-        ignoreDetection: z.boolean().optional(),
-        modes: z.array(z.string()).default(['light', 'dark']).optional(),
-      })
-      .extend(HideConfig.shape)
-      .strict()
-      .optional()
-      .default({}),
-    navigation: z
-      .object({
-        nextButton: z
-          .object({ text: z.string().default('Next to {label}') })
-          .extend(HideConfig.shape)
-          .optional()
-          .default({}),
-        previousButton: z
-          .object({ text: z.string().default('Back to {label}') })
-          .extend(HideConfig.shape)
-          .optional()
-          .default({}),
-      })
-      .strict()
-      .optional()
-      .default({}),
-    codeSnippet: z
-      .object({
-        copy: z
-          .object({
-            buttonText: z.string().default('Copy').optional(),
-            tooltipText: z.string().default('Copy to clipboard').optional(),
-            toasterText: z.string().default('Copied!').optional(),
-            toasterDuration: z.number().default(1500).optional(),
-          })
-          .extend(HideConfig.shape)
-          .optional()
-          .default({}),
-        report: z
-          .object({
-            tooltipText: z.string().default('Report a problem').optional(),
-            label: z.string().optional(),
-          })
-          .extend(HideConfig.shape)
-          .optional()
-          .default({ hide: true }),
-      })
-      .strict()
-      .default({})
-      .optional(),
-    markdown: MarkdownConfig.optional(),
-    openapi: z.object({}).passthrough().optional(),
-    graphql: z.object({}).passthrough().optional(),
-    analytics: z.any().optional(),
-    userProfile: z
-      .object({
-        loginLabel: z.string().default('Login').optional(),
-        logoutLabel: z.string().default('Logout').optional(),
-        menu: z.array(z.any()).optional(), // should be same as navbar items type
-      })
-      .extend(HideConfig.shape)
-      .optional()
-      .default({}),
-  })
-  .passthrough()
-  .default({});
-
-export type ThemeConfig = z.infer<typeof ThemeConfig>;
-// export type ThemeUIConfig = Omit<ThemeConfig, 'navbar' | 'footer' | 'links' | 'scripts'> & {
+export type ThemeConfig = FromSchema<typeof themeConfigSchema>;
 export type ThemeUIConfig = ThemeConfig & {
-  navbar?: any; // TODO
-  footer?: any; // TODO
   auth?: {
     // used by portal dev login emulator
     idpsInfo?: {
@@ -243,4 +355,4 @@ export type ThemeUIConfig = ThemeConfig & {
   };
 };
 
-export type MarkdownConfig = z.infer<typeof MarkdownConfig>;
+export type MarkdownConfig = FromSchema<typeof markdownConfigSchema>;

package/src/globalStyle.ts

@@ -1285,8 +1285,7 @@ const apiReferenceDocs = css`
   /**
   * @tokens API Reference Schemas Layout
   */
-
-  --layout-controls-top-offset: 20px; // @presenter Spacing
+  --layout-controls-margin: 20px; // @presenter Spacing
   --layout-controls-height: 36px; // @presenter Spacing
   --layout-controls-width: 36px; // @presenter Spacing
 

package/src/index.ts

@@ -24,3 +24,4 @@ export * from './config';
 export * from './Pages';
 export * from './Markdown';
 export * from './ReferenceDocs';
+export * from './SidebarActions';