@redocly/theme 0.59.0-next.1 → 0.59.0-rc.1

package/src/components/Catalog/Catalog.tsx

@@ -20,8 +20,11 @@ import { CatalogViewModeToggle } from '@redocly/theme/components/Catalog/Catalog
 import { CatalogSortButton } from '@redocly/theme/components/Catalog/CatalogSortButton';
 import { CatalogEntities } from '@redocly/theme/components/Catalog/CatalogEntities';
 
+type CatalogFiltersWithCounts = Record<string, { value: string; count: number }[]>;
+
 export type CatalogProps = {
   catalogConfig: CatalogEntityConfig;
+  filters?: CatalogFiltersWithCounts;
   entitiesTypes: string[];
   initialEntitiesList?: BffCatalogEntityList;
   catalogSwitcherItems: CatalogSwitcherItem[];
@@ -29,9 +32,11 @@ export type CatalogProps = {
 };
 
 const customCatalogOptionsCasing = (str: string): string => {
-  if (!str) return str;
+  const trimmedStr = str.trim();
+  if (!trimmedStr) return trimmedStr;
+
+  const words = trimmedStr.split(/[\s-_]+/);
 
-  const words = str.split(/[\s-_]+/);
   return words
     .map((word, index) => {
       if (index === 0 && word.toLowerCase() === 'api') {
@@ -45,6 +50,7 @@ const customCatalogOptionsCasing = (str: string): string => {
 export function Catalog(props: CatalogProps): JSX.Element {
   const {
     catalogConfig,
+    filters: serverFilters,
     entitiesTypes,
     initialEntitiesList,
     catalogSwitcherItems,
@@ -72,7 +78,12 @@ export function Catalog(props: CatalogProps): JSX.Element {
     onChangeCollapseSidebarClick,
     layout,
     collapsedSidebar,
-  } = useCatalog(catalogConfig, initialEntitiesList?.page.total || 0, initialViewMode);
+  } = useCatalog(
+    catalogConfig,
+    serverFilters,
+    initialEntitiesList?.page.total || 0,
+    initialViewMode,
+  );
 
   return (
     <>
@@ -94,7 +105,7 @@ export function Catalog(props: CatalogProps): JSX.Element {
               filters={filters}
               filterTerm={searchQuery}
               hideSearch={true}
-              showCounter={false}
+              showCounter={true}
               filterValuesCasing={customCatalogOptionsCasing}
             />
           }

package/src/components/Catalog/CatalogTagsWithTooltip.tsx

@@ -23,7 +23,11 @@ export function CatalogTagsWithTooltip({
     if (showPlaceholder) {
       return (
         <CatalogTagsWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
-          <Tag style={{ backgroundColor: 'var(--catalog-tags-placeholder-bg-color)' }} color="grey">
+          <Tag
+            variant="outline"
+            style={{ backgroundColor: 'var(--catalog-tags-placeholder-bg-color)' }}
+            color="grey"
+          >
             N/A
           </Tag>
         </CatalogTagsWrapper>

package/src/components/OpenApiDocs/hooks/AdditionalOverviewInfo.tsx

@@ -0,0 +1,9 @@
+// interface AdditionalOverviewInfoProps {
+//   info: any;
+// }
+
+// export function AdditionalOverviewInfo(_props: AdditionalOverviewInfoProps) {
+//   return null;
+// }
+
+export const AdditionalOverviewInfo: any = null;

package/src/components/OpenApiDocs/hooks/AfterOpenApiDescription.tsx

@@ -0,0 +1 @@
+export const AfterOpenApiDescription: any = null;

package/src/components/Select/variables.ts

@@ -10,7 +10,7 @@ export const select = css`
   --select-text-color: var(--text-color-secondary); // @presenter Color
   --select-border-radius: var(--border-radius); // @presenter BorderRadius
   --select-border: var(--border-width) var(--border-style) var(--border-color-primary); // @presenter Border
-  
+
   --select-input-padding-vertical: 6px; // @presenter Spacing
   --select-input-padding-horizontal: 6px; // @presenter Spacing
   --select-input-padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
@@ -38,7 +38,7 @@ export const select = css`
   --select-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
   --select-list-item-bg-color-active: transparent; // @presenter Color
   --select-list-item-bg-color-hover: var(--menu-item-bg-color-hover); // @presenter Color
-  --select-list-item-font-weight-active: var(--font-weight-medium); // @presenter Color  
+  --select-list-item-font-weight-active: var(--font-weight-medium); // @presenter Color
 
   --select-placeholder-color: var(--color-warm-grey-6); // @presenter Color
   // @tokens End

package/src/components/Tag/Tag.tsx

@@ -229,23 +229,23 @@ const TagWrapper = styled.div.attrs(({ className, color, size }: TagProps) => ({
   color: var(--tag-color);
   background-color: ${({ variant }) =>
     variant === 'filled' ? 'var(--tag-bg-color)' : 'transparent'};
-  ${({ borderless, variant }) =>
+  ${({ borderless }) =>
     borderless
       ? ''
-      : `border: var(--tag-border-width) var(--tag-border-style) ${variant === 'filled' ? 'transparent' : 'var(--tag-border-color)'};`}
+      : `border: var(--tag-border-width) var(--tag-border-style) var(--tag-border-color);`}
   border-radius: var(--tag-border-radius);
 
   svg {
     width: var(--tag-icon-width);
     height: var(--tag-icon-height);
   }
-
+  /* 
   &:hover {
     background-color: ${({ variant }) =>
-      variant === 'filled' ? 'var(--tag-bg-color-hover)' : 'transparent'};
+    variant === 'filled' ? 'var(--tag-bg-color-hover)' : 'transparent'};
     border-color: ${({ variant }) =>
-      variant === 'outline' ? 'var(--tag-border-color-hover)' : 'transparent'};
-  }
+    variant === 'outline' ? 'var(--tag-border-color-hover)' : 'transparent'};
+  } */
 
   &:focus-visible {
     outline: 1px solid var(--tag-border-color-focused);

package/src/core/types/hooks.ts

@@ -142,6 +142,7 @@ export type ThemeHooks = {
     | undefined;
   useCatalog: (
     config?: CatalogEntityConfig,
+    serverFilters?: Record<string, { value: string; count: number }[]>,
     entitiesCounterInitial?: number,
     initialViewMode?: CatalogViewMode,
   ) => UseCatalogResponse;

package/src/core/types/l10n.ts

@@ -146,6 +146,7 @@ export type TranslationKey =
   | 'catalog.entity.metadata.title'
   | 'catalog.entity.schema.title'
   | 'catalog.entity.properties.apiDescription.title'
+  | 'catalog.backToAllLabel'
   | 'sidebar.menu.backLabel'
   | 'sidebar.menu.backToLabel'
   | 'sidebar.actions.show'

package/src/ext/process-scorecard.ts

@@ -0,0 +1,13 @@
+import { useCallback } from 'react';
+
+import type { CatalogItem } from '@redocly/theme';
+
+export function useProcessScorecard(): {
+  processScorecard: <T = any>(scorecard: T, api: CatalogItem) => T;
+  processInfo: <T>(info: T) => T;
+} {
+  return {
+    processScorecard: useCallback((scorecard) => scorecard, []),
+    processInfo: useCallback((info) => info, []),
+  };
+}

package/src/index.ts

@@ -93,9 +93,11 @@ export * from '@redocly/theme/components/Sidebar/Sidebar';
 /* OpenApiDocs */
 export * from '@redocly/theme/components/OpenApiDocs/hooks/AfterOpenApiOperation';
 export * from '@redocly/theme/components/OpenApiDocs/hooks/AfterOpenApiTitle';
+export * from '@redocly/theme/components/OpenApiDocs/hooks/AfterOpenApiDescription';
 export * from '@redocly/theme/components/OpenApiDocs/hooks/BeforeOpenApiOperation';
 export * from '@redocly/theme/components/OpenApiDocs/hooks/OpenApiFooter';
 export * from '@redocly/theme/components/OpenApiDocs/hooks/OpenApiHeader';
+export * from '@redocly/theme/components/OpenApiDocs/hooks/AdditionalOverviewInfo';
 /* SidebarActions */
 export * from '@redocly/theme/components/SidebarActions/ChangeViewButton';
 export * from '@redocly/theme/components/SidebarActions/SidebarActions';