@redocly/theme 0.19.1 → 0.19.3

package/lib/components/Catalog/Catalog.d.ts

@@ -10,5 +10,7 @@ export declare const FilterControls: import("styled-components").StyledComponent
 export declare const CatalogPageContent: import("styled-components").StyledComponent<"main", any, {}, never>;
 export declare const CatalogTitle: import("styled-components").StyledComponent<"h2", any, {}, never>;
 export declare const CatalogDescription: import("styled-components").StyledComponent<"p", any, {}, never>;
-export declare const CatalogPageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CatalogPageWrapper: import("styled-components").StyledComponent<"div", any, {
+    withoutFilters?: boolean | undefined;
+}, never>;
 export declare const CatalogPageDescriptionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/Catalog/Catalog.js

@@ -27,10 +27,10 @@ function Catalog(props) {
     const { translate } = (0, index_1.useTranslate)();
     (0, useModalScrollLock_1.default)(isAddingFilter);
     return (react_1.default.createElement(Highlight_1.HighlightContext.Provider, { value: [filterTerm] },
-        react_1.default.createElement(exports.CatalogPageWrapper, null,
-            react_1.default.createElement(FilterTagsWrapper, null,
+        react_1.default.createElement(exports.CatalogPageWrapper, { withoutFilters: !filters.length },
+            !!filters.length && (react_1.default.createElement(FilterTagsWrapper, null,
                 react_1.default.createElement(Button_1.Button, { variant: "text", size: "small", icon: react_1.default.createElement(PlusIcon_1.PlusIcon, null), onClick: () => setIsAddingFilter(true) }, translate(translationKeys.addFilter, 'Add filter')),
-                react_1.default.createElement(FilterTags_1.FilterTags, { filters: filters })),
+                react_1.default.createElement(FilterTags_1.FilterTags, { filters: filters }))),
             react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setFilterTerm, filters: filters, filterTerm: filterTerm, isMobile: false, filterValuesCasing: catalogConfig.filterValuesCasing }),
             isAddingFilter && (react_1.default.createElement(FilterPopover_1.FilterPopover, { setIsAddingFilter: setIsAddingFilter, filters: filters, filterValuesCasing: catalogConfig.filterValuesCasing })),
             react_1.default.createElement(exports.CatalogPageContent, null,
@@ -101,16 +101,13 @@ exports.CatalogTitle = (0, styled_components_1.default)(H2_1.H2) `
   color: var(--catalog-title-text-color);
   font-weight: var(--catalog-title-font-weight);
   font-size: var(--catalog-title-font-size);
-
-  && {
-    margin: 0;
-  }
+  margin: var(--catalog-title-margin);
 `;
 exports.CatalogDescription = styled_components_1.default.p `
   color: var(--catalog-description-text-color);
   font-weight: var(--catalog-description-font-weight);
   font-size: var(--catalog-description-font-size);
-  margin: var(--catalog-description-margin-top) 0 var(--catalog-description-margin-bottom) 0;
+  margin: var(--catalog-description-margin);
 `;
 exports.CatalogPageWrapper = styled_components_1.default.div `
   --sidebar-width: var(--catalog-sidebar-width, 285px);
@@ -119,7 +116,6 @@ exports.CatalogPageWrapper = styled_components_1.default.div `
   flex-direction: column;
 
   font-weight: var(--font-weight-regular);
-  padding: 0;
 
   color: var(--text-secondary);
   font-size: var(--font-size-base);
@@ -138,8 +134,11 @@ exports.CatalogPageWrapper = styled_components_1.default.div `
     font-weight: var(--link-font-weight);
   }
 
+  padding: ${({ withoutFilters }) => (withoutFilters ? 'var(--spacing-base) 0 0 0' : '0')};
+
   ${({ theme }) => theme.mediaQueries.medium} {
     flex-direction: row;
+    padding: 0;
   }
 `;
 const FilterTagsWrapper = styled_components_1.default.div.attrs({ 'data-cy': 'Catalog/FilterTags' }) `
@@ -172,6 +171,7 @@ const FilterTagsWrapper = styled_components_1.default.div.attrs({ 'data-cy': 'Ca
   }
 `;
 exports.CatalogPageDescriptionWrapper = styled_components_1.default.div `
+  margin: var(--catalog-heading-margin);
   display: none;
 
   ${({ theme }) => theme.mediaQueries.medium} {

package/lib/components/Catalog/styledVariables.js

@@ -14,12 +14,15 @@ exports.catalog = (0, styled_components_1.css) `
   --mobile-catalog-filter-padding-vertical: var(--spacing-sm);
   --mobile-catalog-filter-padding-horizontal: var(--spacing-base);
 
+  --catalog-heading-margin: 0 0 var(--spacing-xl) 0;
+
   /**
     * @tokens Catalog page title
     */
   --catalog-title-text-color: var(--text-primary);
   --catalog-title-font-weight: var(--font-weight-bold);
   --catalog-title-font-size: var(--font-size-heading-3);
+  --catalog-title-margin: 0 0 var(--spacing-sm) 0;
 
   /**
     * @tokens Catalog page description
@@ -27,8 +30,7 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-description-text-color: var(--text-secondary);
   --catalog-description-font-weight: var(--font-weight-regular);
   --catalog-description-font-size: var(--font-size-base);
-  --catalog-description-margin-top: var(--spacing-sm);
-  --catalog-description-margin-bottom: var(--spacing-xl);
+  --catalog-description-margin: 0 0 var(--spacing-sm) 0;
 
   /**
     * @tokens Catalog page separator

package/lib/components/Catalog/useCatalog.js

@@ -27,10 +27,13 @@ exports.useCatalog = void 0;
 const React = __importStar(require("react"));
 const react_router_dom_1 = require("react-router-dom");
 const telemetry_1 = require("../../mocks/telemetry");
+const usePageData_1 = require("../../mocks/hooks/usePageData");
 const utils_1 = require("../../utils");
 function useCatalog(items, config) {
+    var _a;
     const location = (0, react_router_dom_1.useLocation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
+    const pageData = (0, usePageData_1.usePageData)();
     const searchParams = useSearchParams(location);
     const [filtersState, setFiltersState] = React.useState(() => {
         var _a;
@@ -47,7 +50,8 @@ function useCatalog(items, config) {
     });
     const [filterTerm, setFilterTerm] = React.useState(() => searchParams.get('filter') || '');
     const filtersWithOptions = React.useMemo(() => collectFilterOptions(items, config.filters), [items, config.filters]);
-    const normalizedItems = React.useMemo(() => normalizeItems(items, config), [items, config]);
+    const customFields = (_a = pageData === null || pageData === void 0 ? void 0 : pageData.props) === null || _a === void 0 ? void 0 : _a.customFields;
+    const normalizedItems = React.useMemo(() => normalizeItems(items, config, customFields || {}), [items, config, customFields]);
     const toggleOption = React.useCallback((filterIdx, option) => {
         setFiltersState((prev) => {
             const newFilterOptions = prev[filterIdx] ? prev[filterIdx] : new Set();
@@ -115,8 +119,8 @@ function useCatalog(items, config) {
     return React.useMemo(() => {
         var _a;
         const filters = filtersWithOptions.map((filter, idx) => {
-            var _a, _b, _c;
-            return (Object.assign(Object.assign({}, filter), { toggleOption: (value) => toggleOption(idx, value), selectOption: (value) => selectOption(idx, value), selectedOptions: (_a = filtersState[idx]) !== null && _a !== void 0 ? _a : new Set(), isFilterUsed: ((_c = (_b = filtersState[idx]) === null || _b === void 0 ? void 0 : _b.size) !== null && _c !== void 0 ? _c : 0) > 0 || !!filtersState[idx].from }));
+            var _a, _b, _c, _d;
+            return (Object.assign(Object.assign({}, filter), { toggleOption: (value) => toggleOption(idx, value), selectOption: (value) => selectOption(idx, value), selectedOptions: (_a = filtersState[idx]) !== null && _a !== void 0 ? _a : new Set(), isFilterUsed: ((_c = (_b = filtersState[idx]) === null || _b === void 0 ? void 0 : _b.size) !== null && _c !== void 0 ? _c : 0) > 0 || !!((_d = filtersState[idx]) === null || _d === void 0 ? void 0 : _d.from) }));
         });
         const filteredItems = filterItems(normalizedItems, filters, filterTerm);
         // add more information to filters state which is known only after filtering items
@@ -178,7 +182,7 @@ function groupByFirstFilter(filters, filteredItems) {
 function useSearchParams(location) {
     return React.useMemo(() => new URLSearchParams(location.search), [location.search]);
 }
-function normalizeItems(items, config) {
+function normalizeItems(items, config, customFields) {
     // because of RBAC some versions can be missing so we need to pick up other default version
     const hasDeafultVersion = {};
     for (const item of items) {
@@ -203,9 +207,10 @@ function normalizeItems(items, config) {
     return items.map((item) => {
         var _a, _b, _c;
         const metadata = item.metadata || {};
+        const apiCustomFields = customFields[item.fsPath || ''] || {};
         const link = item.link || ((_a = (0, utils_1.findDeepFirst)(item.items || [], (i) => 'link' in i && !!i.link)) === null || _a === void 0 ? void 0 : _a.link);
         const firstSidebarItem = (_b = item.sidebar) === null || _b === void 0 ? void 0 : _b[0];
-        return Object.assign(Object.assign({}, metadata), { publishedAt: metadata.publishedAt || metadata.createdAt, title: (0, utils_1.toStringIfDefined)(metadata === null || metadata === void 0 ? void 0 : metadata.title) || item.label || 'Untitled', description: (0, utils_1.toStringIfDefined)(metadata === null || metadata === void 0 ? void 0 : metadata.description), link: (_c = (0, utils_1.withoutHash)(link)) !== null && _c !== void 0 ? _c : '#', docsLink: (0, utils_1.withoutHash)(firstSidebarItem === null || firstSidebarItem === void 0 ? void 0 : firstSidebarItem.link), image: (0, utils_1.toStringIfDefined)(metadata === null || metadata === void 0 ? void 0 : metadata.image) });
+        return Object.assign(Object.assign(Object.assign({}, metadata), apiCustomFields), { publishedAt: metadata.publishedAt || metadata.createdAt, title: (0, utils_1.toStringIfDefined)(metadata === null || metadata === void 0 ? void 0 : metadata.title) || item.label || 'Untitled', description: (0, utils_1.toStringIfDefined)(metadata === null || metadata === void 0 ? void 0 : metadata.description), link: (_c = (0, utils_1.withoutHash)(link)) !== null && _c !== void 0 ? _c : '#', docsLink: (0, utils_1.withoutHash)(firstSidebarItem === null || firstSidebarItem === void 0 ? void 0 : firstSidebarItem.link), image: (0, utils_1.toStringIfDefined)(metadata === null || metadata === void 0 ? void 0 : metadata.image) });
     });
 }
 function collectFilterParents(filtersWithOptions) {

package/lib/config.d.ts

@@ -356,7 +356,7 @@ declare const scorecardConfigSchema: {
 declare const catalogSchema: {
     readonly type: "object";
     readonly additionalProperties: true;
-    readonly required: readonly ["slug", "filters", "items"];
+    readonly required: readonly ["slug", "items"];
     readonly properties: {
         readonly slug: {
             readonly type: "string";
@@ -1590,7 +1590,7 @@ export declare const themeConfigSchema: {
                 readonly '.*': {
                     readonly type: "object";
                     readonly additionalProperties: true;
-                    readonly required: readonly ["slug", "filters", "items"];
+                    readonly required: readonly ["slug", "items"];
                     readonly properties: {
                         readonly slug: {
                             readonly type: "string";

package/lib/config.js

@@ -314,7 +314,7 @@ const scorecardConfigSchema = {
 const catalogSchema = {
     type: 'object',
     additionalProperties: true,
-    required: ['slug', 'filters', 'items'],
+    required: ['slug', 'items'],
     properties: {
         slug: { type: 'string' },
         filters: { type: 'array', items: catalogFilterSchema },

package/lib/mocks/hooks/usePageData.d.ts

@@ -2,4 +2,5 @@ import type { ResolvedNavLinkItem } from '../../types/portal';
 export declare function usePageData(): {
     prevPage: ResolvedNavLinkItem | null;
     nextPage: ResolvedNavLinkItem | null;
+    props?: any;
 } | null;

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

@@ -17,6 +17,7 @@ export type ResolvedNavLinkItem = {
     httpVerb?: string;
     separatorLine?: boolean;
     routeSlug?: string;
+    fsPath?: string;
     active?: boolean;
     icon?: string;
     srcSet?: string;
@@ -41,6 +42,7 @@ export type ResolvedNavGroupItem = {
     menuStyle?: MenuStyle;
     separatorLine?: boolean;
     routeSlug?: string;
+    fsPath?: string;
     active?: boolean;
     icon?: string;
     srcSet?: string;
@@ -52,6 +54,7 @@ export type ResolvedNavItem = ResolvedNavLinkItem | ResolvedNavGroupItem | {
     label?: string;
     labelTranslationKey?: string;
     routeSlug?: never;
+    fsPath?: never;
     version?: string;
     isDefault?: boolean;
     versionFolderId?: string;
@@ -70,6 +73,7 @@ export type ResolvedNavItem = ResolvedNavLinkItem | ResolvedNavGroupItem | {
     versionFolderId?: string;
     metadata?: Record<string, unknown>;
     routeSlug?: never;
+    fsPath?: never;
     label: string;
     labelTranslationKey?: string;
     link?: undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.19.1",
+  "version": "0.19.3",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/Catalog/Catalog.tsx

@@ -35,18 +35,20 @@ export default function Catalog(props: {
 
   return (
     <HighlightContext.Provider value={[filterTerm]}>
-      <CatalogPageWrapper>
-        <FilterTagsWrapper>
-          <Button
-            variant="text"
-            size="small"
-            icon={<PlusIcon />}
-            onClick={() => setIsAddingFilter(true)}
-          >
-            {translate(translationKeys.addFilter, 'Add filter')}
-          </Button>
-          <FilterTags filters={filters} />
-        </FilterTagsWrapper>
+      <CatalogPageWrapper withoutFilters={!filters.length}>
+        {!!filters.length && (
+          <FilterTagsWrapper>
+            <Button
+              variant="text"
+              size="small"
+              icon={<PlusIcon />}
+              onClick={() => setIsAddingFilter(true)}
+            >
+              {translate(translationKeys.addFilter, 'Add filter')}
+            </Button>
+            <FilterTags filters={filters} />
+          </FilterTagsWrapper>
+        )}
         <FilterContent
           setFilterTerm={setFilterTerm}
           filters={filters}
@@ -152,27 +154,23 @@ export const CatalogTitle = styled(H2)`
   color: var(--catalog-title-text-color);
   font-weight: var(--catalog-title-font-weight);
   font-size: var(--catalog-title-font-size);
-
-  && {
-    margin: 0;
-  }
+  margin: var(--catalog-title-margin);
 `;
 
 export const CatalogDescription = styled.p`
   color: var(--catalog-description-text-color);
   font-weight: var(--catalog-description-font-weight);
   font-size: var(--catalog-description-font-size);
-  margin: var(--catalog-description-margin-top) 0 var(--catalog-description-margin-bottom) 0;
+  margin: var(--catalog-description-margin);
 `;
 
-export const CatalogPageWrapper = styled.div`
+export const CatalogPageWrapper = styled.div<{ withoutFilters?: boolean }>`
   --sidebar-width: var(--catalog-sidebar-width, 285px);
 
   display: flex;
   flex-direction: column;
 
   font-weight: var(--font-weight-regular);
-  padding: 0;
 
   color: var(--text-secondary);
   font-size: var(--font-size-base);
@@ -191,8 +189,11 @@ export const CatalogPageWrapper = styled.div`
     font-weight: var(--link-font-weight);
   }
 
+  padding: ${({ withoutFilters }) => (withoutFilters ? 'var(--spacing-base) 0 0 0' : '0')};
+
   ${({ theme }) => theme.mediaQueries.medium} {
     flex-direction: row;
+    padding: 0;
   }
 `;
 
@@ -227,6 +228,7 @@ const FilterTagsWrapper = styled.div.attrs({ 'data-cy': 'Catalog/FilterTags' })`
 `;
 
 export const CatalogPageDescriptionWrapper = styled.div`
+  margin: var(--catalog-heading-margin);
   display: none;
 
   ${({ theme }) => theme.mediaQueries.medium} {

package/src/components/Catalog/styledVariables.ts

@@ -12,12 +12,15 @@ export const catalog = css`
   --mobile-catalog-filter-padding-vertical: var(--spacing-sm);
   --mobile-catalog-filter-padding-horizontal: var(--spacing-base);
 
+  --catalog-heading-margin: 0 0 var(--spacing-xl) 0;
+
   /**
     * @tokens Catalog page title
     */
   --catalog-title-text-color: var(--text-primary);
   --catalog-title-font-weight: var(--font-weight-bold);
   --catalog-title-font-size: var(--font-size-heading-3);
+  --catalog-title-margin: 0 0 var(--spacing-sm) 0;
 
   /**
     * @tokens Catalog page description
@@ -25,8 +28,7 @@ export const catalog = css`
   --catalog-description-text-color: var(--text-secondary);
   --catalog-description-font-weight: var(--font-weight-regular);
   --catalog-description-font-size: var(--font-size-base);
-  --catalog-description-margin-top: var(--spacing-sm);
-  --catalog-description-margin-bottom: var(--spacing-xl);
+  --catalog-description-margin: 0 0 var(--spacing-sm) 0;
 
   /**
     * @tokens Catalog page separator

package/src/components/Catalog/useCatalog.ts

@@ -4,6 +4,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import type { Location } from 'react-router-dom';
 
 import { telemetry } from '@portal/telemetry';
+import { usePageData } from '@portal/hooks/usePageData';
 import type { ResolvedNavItem } from '@theme/types/portal';
 import type {
   CatalogItem,
@@ -16,6 +17,7 @@ import type { CatalogConfig, CatalogFilterConfig } from '@theme/config';
 export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): FilteredCatalog {
   const location = useLocation();
   const navigate = useNavigate();
+  const pageData = usePageData();
   const searchParams = useSearchParams(location);
   const [filtersState, setFiltersState] = React.useState(() =>
     (config.filters ?? []).map((f) => {
@@ -33,7 +35,12 @@ export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): Fil
     () => collectFilterOptions(items, config.filters),
     [items, config.filters],
   );
-  const normalizedItems = React.useMemo(() => normalizeItems(items, config), [items, config]);
+
+  const customFields = pageData?.props?.customFields;
+  const normalizedItems = React.useMemo(
+    () => normalizeItems(items, config, customFields || ({} as any)),
+    [items, config, customFields],
+  );
 
   const toggleOption = React.useCallback((filterIdx, option) => {
     setFiltersState((prev) => {
@@ -114,7 +121,7 @@ export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): Fil
       selectOption: (value: string) => selectOption(idx, value),
       selectedOptions: filtersState[idx] ?? new Set<string>(),
       isFilterUsed:
-        ((filtersState[idx] as any)?.size ?? 0) > 0 || !!(filtersState[idx] as any).from,
+        ((filtersState[idx] as any)?.size ?? 0) > 0 || !!(filtersState[idx] as any)?.from,
     }));
 
     const filteredItems = filterItems(normalizedItems, filters, filterTerm);
@@ -198,7 +205,11 @@ function useSearchParams(location: Location) {
   return React.useMemo(() => new URLSearchParams(location.search), [location.search]);
 }
 
-function normalizeItems(items: ResolvedNavItem[], config: CatalogConfig): CatalogItem[] {
+function normalizeItems(
+  items: ResolvedNavItem[],
+  config: CatalogConfig,
+  customFields: Record<string, Record<string, unknown>>,
+): CatalogItem[] {
   // because of RBAC some versions can be missing so we need to pick up other default version
   const hasDeafultVersion: Record<string, boolean> = {};
   for (const item of items) {
@@ -223,10 +234,12 @@ function normalizeItems(items: ResolvedNavItem[], config: CatalogConfig): Catalo
 
   return items.map((item) => {
     const metadata = item.metadata || {};
+    const apiCustomFields = customFields[item.fsPath || ''] || {};
     const link = item.link || findDeepFirst(item.items || [], (i) => 'link' in i && !!i.link)?.link;
     const firstSidebarItem = (item as any).sidebar?.[0];
     return {
       ...metadata,
+      ...apiCustomFields,
       publishedAt: metadata.publishedAt || metadata.createdAt,
       title: toStringIfDefined(metadata?.title) || item.label || 'Untitled',
       description: toStringIfDefined(metadata?.description),

package/src/config.ts

@@ -354,7 +354,7 @@ const scorecardConfigSchema = {
 const catalogSchema = {
   type: 'object',
   additionalProperties: true,
-  required: ['slug', 'filters', 'items'],
+  required: ['slug', 'items'],
   properties: {
     slug: { type: 'string' },
     filters: { type: 'array', items: catalogFilterSchema },

package/src/mocks/hooks/usePageData.ts

@@ -3,6 +3,7 @@ import type { ResolvedNavLinkItem } from '@theme/types/portal';
 export function usePageData(): {
   prevPage: ResolvedNavLinkItem | null;
   nextPage: ResolvedNavLinkItem | null;
+  props?: any;
 } | null {
   return {
     prevPage: { label: 'Intro', type: 'link', link: '#prev' },

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

@@ -20,6 +20,7 @@ export type ResolvedNavLinkItem = {
   httpVerb?: string;
   separatorLine?: boolean;
   routeSlug?: string;
+  fsPath?: string
   active?: boolean;
   icon?: string;
   srcSet?: string;
@@ -47,6 +48,7 @@ export type ResolvedNavGroupItem = {
   menuStyle?: MenuStyle;
   separatorLine?: boolean;
   routeSlug?: string;
+  fsPath?: string
   active?: boolean;
   icon?: string;
   srcSet?: string;
@@ -62,6 +64,7 @@ export type ResolvedNavItem =
     label?: string;
     labelTranslationKey?: string;
     routeSlug?: never;
+    fsPath?: never
 
     version?: string;
     isDefault?: boolean;
@@ -84,6 +87,7 @@ export type ResolvedNavItem =
     versionFolderId?: string;
     metadata?: Record<string, unknown>;
     routeSlug?: never;
+    fsPath?: never
 
     label: string;
     labelTranslationKey?: string;