@redocly/theme 0.17.1 → 0.18.1

package/src/config.ts

@@ -1,6 +1,6 @@
 import type { FromSchema } from 'json-schema-to-ts';
 import type { MenuStyle, ResolvedNavLinkItem } from './types/portal';
-import type { CatalogConfig } from './types/portal/src/shared/types/catalog';
+import type { REDOCLY_TEAMS_RBAC } from './types/portal/src/shared/constants';
 
 const logoConfigSchema = {
   type: 'object',
@@ -89,7 +89,7 @@ const markdownConfigSchema = {
       type: 'object',
       properties: {
         header: { type: 'string', default: 'On this page' },
-        depth: { type: 'number', default: 3 },
+        depth: { type: 'integer', default: 3, minimum: 1 },
         ...hideConfigSchema.properties,
       },
       additionalProperties: false,
@@ -276,6 +276,17 @@ const navItemsSchema = {
   },
 } as const;
 
+const productConfigSchema = {
+  type: 'object',
+  properties: {
+    name: { type: 'string' },
+    icon: { type: 'string' },
+    folder: { type: 'string' },
+  },
+  additionalProperties: false,
+  required: ['name', 'icon', 'folder'],
+} as const;
+
 const suggestedPageSchema = {
   type: 'object',
   properties: {
@@ -286,6 +297,93 @@ const suggestedPageSchema = {
   required: ['page'],
 } as const;
 
+const catalogFilterSchema = {
+  type: 'object',
+  additionalProperties: false,
+  required: ['title', 'property'],
+  properties: {
+    type: { type: 'string', enum: ['select', 'checkboxes', 'date-range'] },
+    title: { type: 'string' },
+    titleTranslationKey: { type: 'string' },
+    property: { type: 'string' },
+    parentFilter: { type: 'string' },
+    missingCategoryName: { type: 'string' },
+    missingCategoryNameTranslationKey: { type: 'string' },
+    options: { type: 'array', items: { type: 'string' } },
+  },
+} as const;
+
+const scorecardConfigSchema = {
+  type: 'object',
+  additionalProperties: true,
+  required: ['levels'],
+  properties: {
+    failBuildIfBelowMinimum: { type: 'boolean', default: false },
+    levels: {
+      type: 'array',
+      items: {
+        type: 'object',
+        required: ['name'],
+        properties: {
+          name: { type: 'string' },
+          extends: { type: 'array', items: { type: 'string' } },
+          rules: {
+            type: 'object',
+            additionalProperties: {
+              type: ['object', 'string'],
+            },
+          },
+        },
+        additionalProperties: false,
+      },
+    },
+    targets: {
+      type: 'array',
+      items: {
+        type: 'object',
+        required: ['where'],
+        properties: {
+          minimumLevel: { type: 'string' },
+          where: {
+            type: 'object',
+            required: ['metadata'],
+            properties: {
+              metadata: { type: 'object', additionalProperties: { type: 'string' } },
+            },
+            additionalProperties: false,
+          },
+        },
+        additionalProperties: false,
+      },
+    },
+  },
+} as const;
+
+const catalogSchema = {
+  type: 'object',
+  additionalProperties: true,
+  required: ['slug', 'filters', 'groupByFirstFilter', 'items'],
+  properties: {
+    slug: { type: 'string' },
+    filters: { type: 'array', items: catalogFilterSchema },
+    groupByFirstFilter: { type: 'boolean' },
+    items: navItemsSchema,
+    requiredPermission: { type: 'string' },
+    separateVersions: { type: 'boolean' },
+    title: { type: 'string' },
+    titleTranslationKey: { type: 'string' },
+    description: { type: 'string' },
+    descriptionTranslationKey: { type: 'string' },
+  },
+} as const;
+
+const catalogsConfigSchema = {
+  type: 'object',
+  patternProperties: {
+    '.*': catalogSchema,
+  },
+} as const;
+
 export const themeConfigSchema = {
   type: 'object',
   properties: {
@@ -303,6 +401,10 @@ export const themeConfigSchema = {
       },
       additionalProperties: false,
     },
+    products: {
+      type: 'object',
+      additionalProperties: productConfigSchema,
+    },
     footer: {
       type: 'object',
       properties: {
@@ -532,15 +634,29 @@ export const themeConfigSchema = {
       additionalProperties: false,
       default: {},
     },
+    catalog: catalogsConfigSchema,
+    scorecard: scorecardConfigSchema,
   },
   additionalProperties: true,
   default: {},
 } as const;
 
-// FIXME: add catalog to schema
-export type ThemeConfig = FromSchema<typeof themeConfigSchema> & {
-  catalog?: Record<string, CatalogConfig>;
-};
+export const productThemeOverrideSchema = {
+  type: 'object',
+  properties: {
+    logo: themeConfigSchema.properties.logo,
+    navbar: themeConfigSchema.properties.navbar,
+    footer: themeConfigSchema.properties.footer,
+    sidebar: themeConfigSchema.properties.sidebar,
+    search: themeConfigSchema.properties.search,
+    codeSnippet: themeConfigSchema.properties.codeSnippet,
+    breadcrumbs: themeConfigSchema.properties.breadcrumbs,
+  },
+  additionalProperties: true,
+  default: {},
+} as const;
+
+export type ThemeConfig = FromSchema<typeof themeConfigSchema>;
 
 export type ThemeUIConfig = ThemeConfig & {
   auth?: {
@@ -559,6 +675,21 @@ export type ThemeUIConfig = ThemeConfig & {
   breadcrumbs?: {
     prefixItems?: ResolvedNavLinkItem[];
   };
+  products?: {
+    [key: string]: ProductUiConfig;
+  };
+};
+
+export type ProductConfig = FromSchema<typeof productConfigSchema>;
+export type ProductThemeOverrideConfig = Pick<
+  ThemeUIConfig,
+  'logo' | 'navbar' | 'footer' | 'sidebar' | 'search' | 'codeSnippet' | 'breadcrumbs'
+>;
+export type ProductUiConfig = ProductConfig & {
+  slug: string;
+  link: string;
+  [REDOCLY_TEAMS_RBAC]?: { [key: string]: string };
+  themeOverride?: ProductThemeOverrideConfig;
 };
 
 export type MarkdownConfig = FromSchema<typeof markdownConfigSchema>;
@@ -568,3 +699,6 @@ export type RudderstackAnalyticsConfig = FromSchema<typeof rudderstackAnalyticsC
 export type SegmentAnalyticsConfig = FromSchema<typeof segmentAnalyticsConfigSchema>;
 export type GtmAnalyticsConfig = FromSchema<typeof gtmAnalyticsConfigSchema>;
 export type GoogleAnalyticsConfig = FromSchema<typeof googleAnalyticsConfigSchema>;
+export type CatalogConfig = FromSchema<typeof catalogSchema>;
+export type CatalogFilterConfig = FromSchema<typeof catalogFilterSchema>;
+export type ScorecardConfig = FromSchema<typeof scorecardConfigSchema>;

package/src/globalStyle.ts

@@ -464,7 +464,7 @@ const sidebar = css`
   /**
     * @tokens Sidebar item icon
     */
-  --sidebar-item-icon-size: 32px; // icon is for drilldown only but I would like to support it in general
+  --sidebar-item-icon-size: 20px;
   --sidebar-item-icon-border-radius: 100%;
 
   /**
@@ -1352,9 +1352,9 @@ const apiReferenceDocs = css`
   */
 
   --schemas-mime-type-dropdown-padding: 0px 26px 0px 4px;
-  --schemas-mime-type-dropdown-border: var(--dropdown-border); // @presenter Border
-  --schemas-mime-type-dropdown-font-size: var(--dropdown-font-size); // @presenter FontSize
-  --schemas-mime-type-dropdown-text-color: var(--dropdown-text-color); // @presenter Color
+  --schemas-mime-type-dropdown-border: var(--docs-dropdown-border); // @presenter Border
+  --schemas-mime-type-dropdown-font-size: var(--docs-dropdown-font-size); // @presenter FontSize
+  --schemas-mime-type-dropdown-text-color: var(--docs-dropdown-font-size); // @presenter Color
 
   /**
   * @tokens API Reference Schemas Discriminator Dropdown
@@ -1362,8 +1362,8 @@ const apiReferenceDocs = css`
 
   --schemas-discriminator-dropdown-padding: 2px 24px 2px 8px;
   --schemas-discriminator-dropdown-border: 1px solid var(--border-color); // @presenter Border
-  --schemas-discriminator-font-size: var(--dropdown-font-size); // @presenter FontSize
-  --schemas-discriminator-dropdown-text-color: var(--dropdown-text-color); // @presenter Color
+  --schemas-discriminator-font-size: var(--docs-dropdown-font-size); // @presenter FontSize
+  --schemas-discriminator-dropdown-text-color: var(--docs-dropdown-text-color); // @presenter Color
 
   /**
   * @tokens API Reference Schemas Titles
@@ -1632,7 +1632,7 @@ const navbar = css`
   --navbar-item-font-size: 16px; // @presenter FontSize
   --navbar-item-padding-horizontal: 16px; // @presenter Spacing
   --navbar-item-padding-vertical: 8px; // @presenter Spacing
-  --navbar-item-margin-horizontal: 7px;
+  --navbar-item-gap: 5px;
   --navbar-item-border-radius: var(--border-radius); // @presenter BorderRadius
   --navbar-item-font-weight: var(--font-weight-bold); // @presenter FontWeight
   --navbar-item-hover-background-color: var(--color-primary-300);
@@ -1672,6 +1672,17 @@ const breadcrumbs = css`
   // @tokens End
 `
 
+const product = css`
+  /**
+   * @tokens Product
+   */
+  --product-padding-horizontal: 8px; // @presenter Spacing
+  --product-padding-vertical: 8px; // @presenter Spacing
+  --product-logo-margin: 10px; // @presenter Spacing
+
+  // @tokens End
+`
+
 const mobileMenu = css`
     /**
   * @tokens Mobile Menu icons
@@ -2022,19 +2033,170 @@ const search = css`
   // @tokens End
 `;
 
-const dropdown = css`
-  --dropdown-font-size: 14px;
-  --dropdown-text-color: var(--text-color);
+const docsDropdown = css`
+  --docs-dropdown-font-size: 14px;
+  --docs-dropdown-text-color: var(--text-color);
 
-  --dropdown-padding-vertical: 8px;
-  --dropdown-padding-left: 10px;
-  --dropdown-padding-right: 26px;
-  --dropdown-padding: var(--dropdown-padding-vertical) var(--dropdown-padding-right)
-    var(--dropdown-padding-vertical) var(--dropdown-padding-left);
+  --docs-dropdown-padding-vertical: 8px;
+  --docs-dropdown-padding-left: 10px;
+  --docs-dropdown-padding-right: 26px;
+  --docs-dropdown-padding: var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-right)
+    var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-left);
 
-  --dropdown-border: none;
+  --docs-dropdown-border: none;
 `;
 
+const dropdown = css`
+  --dropdown-font-size: 16px; // @presenter FontSize
+  --dropdown-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --dropdown-line-height: var(--line-height-base); // @presenter LineHeight
+  --dropdown-text-color: var(--text-color); // @presenter Color
+  --dropdown-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  --dropdown-list-min-width: 100px;
+  --dropdown-list-max-width: 300px;
+  --dropdown-list-padding: 4px; // @presenter Spacing
+  --dropdown-list-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --dropdown-list-background-color: var(--background-color); // @presenter Color
+  --dropdown-list-box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 6px 16px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12); // @presenter Shadow
+
+  --dropdown-list-item-horizontal-padding: 16px; // @presenter Spacing
+  --dropdown-list-item-vertical-padding: 8px; // @presenter Spacing
+  --dropdown-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
+  --dropdown-list-item-active-background-color: #0000000a; // @presenter Color
+  --dropdown-list-item-separator-color: var(--border-color); // @presenter Color
+
+  /**
+   * @tokens User profile menu dropdown
+   * */
+
+  --profile-dropdown-font-size: var(--dropdown-font-size); // @presenter FontSize
+  --profile-dropdown-font-weight: var(--dropdown-font-weight); // @presenter FontWeight
+  --profile-dropdown-line-height: var(--dropdown-line-height); // @presenter LineHeight
+  --profile-dropdown-text-color: var(--dropdown-text-color); // @presenter Color
+  --profile-dropdown-border-radius: var(--dropdown-border-radius); // @presenter BorderRadius
+
+  --profile-dropdown-list-min-width: var(--dropdown-list-min-width);
+  --profile-dropdown-list-max-width: var(--dropdown-list-max-width);
+  --profile-dropdown-list-padding: var(--dropdown-list-padding); // @presenter Spacing
+  --profile-dropdown-list-border-radius: var(--dropdown-list-border-radius); // @presenter BorderRadius
+  --profile-dropdown-list-background-color: var(--dropdown-list-background-color); // @presenter Color
+  --profile-dropdown-list-box-shadow: var(--dropdown-list-box-shadow); // @presenter Shadow
+
+  --profile-dropdown-list-item-horizontal-padding: var(--dropdown-list-item-horizontal-padding); // @presenter Spacing
+  --profile-dropdown-list-item-vertical-padding: var(--dropdown-list-item-vertical-padding); // @presenter Spacing
+  --profile-dropdown-list-item-border-radius: var(--dropdown-list-item-border-radius); // @presenter BorderRadius
+  --profile-dropdown-list-item-active-background-color: var(--dropdown-list-item-active-background-color); // @presenter Color
+  --profile-dropdown-list-item-separator-color: var(--dropdown-list-item-separator-color); // @presenter Color
+`
+
+const select = css`
+  --select-font-size: 16px; // @presenter FontSize
+  --select-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --select-line-height: var(--line-height-base); // @presenter LineHeight
+  --select-text-color: var(--text-color); // @presenter Color
+  --select-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  --select-input-padding-horizontal: 16px;  // @presenter Spacing
+  --select-input-padding-vertical: 6px;  // @presenter Spacing
+  --select-input-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  --select-list-min-width: 100px;
+  --select-list-max-width: 300px;
+  --select-list-padding: 4px; // @presenter Spacing
+  --select-list-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --select-list-background-color: var(--background-color); // @presenter Color
+  --select-list-box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 6px 16px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
+
+  --select-list-item-horizontal-padding: 16px; // @presenter Spacing
+  --select-list-item-vertical-padding: 8px; // @presenter Spacing
+  --select-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
+  --select-list-item-active-background-color: #0000000a; // @presenter Color
+
+  /**
+   * @tokens Version picker
+   * */
+
+  --version-picker-font-size: var(--font-size-base); // @presenter FontSize
+  --version-picker-font-weight: var(--select-font-weight); // @presenter FontWeight
+  --version-picker-line-height: var(--select-line-height); // @presenter LineHeight
+  --version-picker-text-color: var(--select-text-color); // @presenter Color
+  --version-picker-border-radius: var(--select-border-radius); // @presenter BorderRadius
+  --version-picker-margin-vertical: 10px; // @presenter Spacing
+  --version-picker-margin-horizontal: 15px; // @presenter Spacing
+
+  --version-picker-input-padding-horizontal: var(--select-input-padding-horizontal); // @presenter Spacing
+  --version-picker-input-padding-vertical: var(--select-input-padding-vertical); // @presenter Spacing
+  --version-picker-input-border: 1px solid var(--border-color); // @presenter Border
+  --version-picker-input-border-radius: var(--select-input-border-radius); // @presenter BorderRadius
+
+  --version-picker-list-min-width: var(--select-list-min-width);
+  --version-picker-list-max-width: var(--select-list-max-width);
+  --version-picker-list-padding: var(--select-list-padding); // @presenter Spacing
+  --version-picker-list-border-radius: var(--select-list-border-radius); // @presenter BorderRadius
+  --version-picker-list-background-color: var(--select-list-background-color); // @presenter Color
+  --version-picker-list-box-shadow: var(--select-list-box-shadow); // @presenter Shadow
+
+  --version-picker-list-item-horizontal-padding: var(--select-list-item-horizontal-padding); // @presenter Spacing
+  --version-picker-list-item-vertical-padding: var(--select-list-item-vertical-padding); // @presenter Spacing
+  --version-picker-list-item-border-radius: var(--select-list-item-border-radius); // @presenter BorderRadius
+  --version-picker-list-item-active-background-color: var(--select-list-item-active-background-color); // @presenter Color
+
+
+  /**
+   * @tokens Language picker
+   * */
+
+  --language-picker-font-size: var(--select-font-size); // @presenter FontSize
+  --language-picker-font-weight: var(--select-font-weight); // @presenter FontWeight
+  --language-picker-line-height: var(--select-line-height); // @presenter LineHeight
+  --language-picker-text-color: var(--select-text-color); // @presenter Color
+  --language-picker-border-radius: var(--select-border-radius); // @presenter BorderRadius
+
+  --language-picker-input-padding-horizontal: var(--select-input-padding-horizontal); // @presenter Spacing
+  --language-picker-input-padding-vertical: var(--select-input-padding-vertical); // @presenter Spacing
+  --language-picker-input-border-radius: var(--select-input-border-radius); // @presenter BorderRadius
+
+  --language-picker-list-min-width: var(--select-list-min-width);
+  --language-picker-list-max-width: var(--select-list-max-width);
+  --language-picker-list-padding: var(--select-list-padding); // @presenter Spacing
+  --language-picker-list-border-radius: var(--select-list-border-radius); // @presenter BorderRadius
+  --language-picker-list-background-color: var(--select-list-background-color); // @presenter Color
+  --language-picker-list-box-shadow: var(--select-list-box-shadow); // @presenter Shadow
+
+  --language-picker-list-item-horizontal-padding: var(--select-list-item-horizontal-padding); // @presenter Spacing
+  --language-picker-list-item-vertical-padding: var(--select-list-item-vertical-padding); // @presenter Spacing
+  --language-picker-list-item-border-radius: var(--select-list-item-border-radius); // @presenter BorderRadius
+  --language-picker-list-item-active-background-color: var(--select-list-item-active-background-color); // @presenter Color
+
+  /**
+   * @tokens Product picker
+   * */
+
+  --product-picker-font-size: var(--select-font-size); // @presenter FontSize
+  --product-picker-font-weight: var(--select-font-weight); // @presenter FontWeight
+  --product-picker-line-height: var(--select-line-height); // @presenter LineHeight
+  --product-picker-text-color: var(--select-text-color); // @presenter Color
+  --product-picker-border-radius: var(--select-border-radius); // @presenter BorderRadius
+
+  --product-picker-input-padding-horizontal: var(--select-input-padding-horizontal); // @presenter Spacing
+  --product-picker-input-padding-vertical: var(--select-input-padding-vertical); // @presenter Spacing
+  --product-picker-input-border-radius: var(--select-input-border-radius); // @presenter BorderRadius
+
+  --product-picker-list-min-width: var(--select-list-min-width);
+  --product-picker-list-max-width: var(--select-list-max-width);
+  --product-picker-list-padding: var(--select-list-padding); // @presenter Spacing
+  --product-picker-list-border-radius: var(--select-list-border-radius); // @presenter BorderRadius
+  --product-picker-list-background-color: var(--select-list-background-color); // @presenter Color
+  --product-picker-list-box-shadow: var(--select-list-box-shadow); // @presenter Shadow
+
+  --product-picker-list-item-horizontal-padding: var(--select-list-item-horizontal-padding); // @presenter Spacing
+  --product-picker-list-item-vertical-padding: var(--select-list-item-vertical-padding); // @presenter Spacing
+  --product-picker-list-item-border-radius: var(--select-list-item-border-radius); // @presenter BorderRadius
+  --product-picker-list-item-active-background-color: var(--select-list-item-active-background-color); // @presenter Color
+`;
+
+
 const lastUpdated = css`
   --last-updated-text-color: var(--text-color);
   --last-updated-font-size: var(--font-size-small);
@@ -2190,6 +2352,7 @@ export const styles = css`
     ${logo}
     ${badges}
     ${breadcrumbs}
+    ${product}
     ${toc}
     ${inputs}
     ${tooltip}
@@ -2198,6 +2361,8 @@ export const styles = css`
     ${markdown}
     ${search}
     ${dropdown}
+    ${docsDropdown}
+    ${select}
     ${apiReferencePanels}
     ${apiReferenceDocs}
     ${lastUpdated}

package/src/hooks/useThemeConfig.ts

@@ -2,9 +2,24 @@ import { createContext, useContext } from 'react';
 
 import type { ThemeUIConfig } from '@theme';
 
+import { useCurrentProduct } from '@portal/hooks';
+
 export const ThemeConfigContext = createContext<ThemeUIConfig>({} as ThemeUIConfig);
 
-export function useThemeConfig<T extends Record<string, unknown>>(): T &
-  NonNullable<ThemeUIConfig> {
-  return (useContext(ThemeConfigContext) as T & NonNullable<ThemeUIConfig>) || {};
+export function useThemeConfig<T extends Record<string, unknown>>(
+  useProductConfig: boolean = true,
+): T & NonNullable<ThemeUIConfig> {
+  const themeConfig = (useContext(ThemeConfigContext) as T & NonNullable<ThemeUIConfig>) || {};
+
+  const currentProduct = useCurrentProduct();
+
+  const mergedTheme =
+    useProductConfig && currentProduct?.themeOverride
+      ? {
+          ...themeConfig,
+          ...currentProduct.themeOverride,
+        }
+      : themeConfig;
+
+  return mergedTheme;
 }

package/src/mocks/hooks/index.ts

@@ -1,13 +1,15 @@
-import type { ThemeUIConfig } from '@theme/config';
+import type { CatalogConfig, ProductUiConfig, ThemeUIConfig } from '@theme/config';
 import type { ResolvedNavItem, TFunction, Version } from '@theme/types/portal';
-import type { CatalogConfig, FilteredCatalog } from '@theme/types/portal/src/shared/types/catalog';
+import type { FilteredCatalog } from '@theme/types/portal/src/shared/types/catalog';
 interface PageLink {
   label: string;
   link: string;
   type: 'link';
 }
 
-export function useThemeConfig<T extends Record<string, unknown>>(): T & ThemeUIConfig {
+export function useThemeConfig<T extends Record<string, unknown>>(
+  _useProductConfig: boolean = true,
+): T & ThemeUIConfig {
   return {
     search: {
       hide: false,
@@ -96,6 +98,10 @@ export function useI18nConfig() {
   };
 }
 
+export function useCurrentProduct(): ProductUiConfig | undefined {
+  return undefined;
+}
+
 export function usePageVersions(): { versions: Version[] } {
   return {
     versions: [

package/src/mocks/search.ts

@@ -18,7 +18,7 @@ interface SearchDocument {
   parameters?: OperationParameter[];
 }
 
-export function useFuseSearch(): {
+export function useFuseSearch(_product?: string): {
   query: string;
   setQuery: (val: string) => void;
   items: SearchDocument[] | null;

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

@@ -1,4 +1,4 @@
-import type { NavItem } from './nav';
+import { CatalogFilterConfig } from "@theme/config";
 
 export type FilteredCatalog = {
   groups: { title: string; items: CatalogItem[] }[];
@@ -7,31 +7,7 @@ export type FilteredCatalog = {
   setFilterTerm: (term: string) => void;
 };
 
-export type Filter = {
-  type?: 'select' | 'checkboxes' | 'date-range';
-  title: string;
-  titleTranslationKey?: string;
-  property: string;
-  parentFilter?: string;
-  missingCategoryName?: string;
-  missingCategoryNameTranslationKey?: string;
-  options?: string[];
-};
-
-export type CatalogConfig = {
-  slug: string;
-  filters: Filter[];
-  groupByFirstFilter: boolean;
-  items: NavItem[];
-  requiredPermission?: string;
-  separateVersions?: boolean;
-  title?: string;
-  titleTranslationKey?: string;
-  description?: string;
-  descriptionTranslationKey?: string;
-};
-
-export type ResolvedFilter = Omit<Filter, 'options'> & {
+export type ResolvedFilter = Omit<CatalogFilterConfig, 'options'> & {
   options: {
     value: string;
     count: number;

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

@@ -1,3 +1,5 @@
 export declare interface TFunction {
   (value?: string, options?: string | TOptions): string;
-}
+}
+
+export type Locale = { code: string; name: string };