@redocly/theme 0.57.0-next.3 → 0.57.0-next.4

package/src/core/hooks/search/use-search-dialog.ts

@@ -18,7 +18,7 @@ export function useSearchDialog() {
     if (hotKeys) {
       hotkeys(hotKeys, (ev) => {
         setIsOpen(true);
-        telemetry.send({ type: 'search.opened', payload: { method: 'shortcut' } });
+        telemetry.sendSearchOpenedMessage({ method: 'shortcut' });
         ev.preventDefault();
       });
 
@@ -28,7 +28,7 @@ export function useSearchDialog() {
   }, [hotKeys]);
 
   const onOpen = useCallback(function () {
-    telemetry.send({ type: 'search.opened', payload: { method: 'click' } });
+    telemetry.sendSearchOpenedMessage({ method: 'click' });
     setIsOpen(true);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

package/src/core/hooks/use-color-switcher.ts

@@ -34,10 +34,7 @@ export const useColorSwitcher = () => {
     window.requestAnimationFrame(() => {
       document.documentElement.classList.remove('notransition');
     });
-    telemetry.send({
-      type: 'color_mode.switched',
-      payload: { from: activeColorMode, to: newMode },
-    });
+    telemetry.sendColorModeSwitchedMessage({ from: activeColorMode, to: newMode });
 
     setActiveColorMode(newMode);
   };

package/src/core/hooks/use-product-picker.ts

@@ -11,7 +11,7 @@ export function useProductPicker() {
   const loadAndNavigate = useLoadAndNavigate();
   function setProduct(product: typeof currentProduct) {
     if (!product) return;
-    telemetry.send({ type: 'product.picked', payload: { product: product.slug } });
+    telemetry.sendProductPickedMessage({ product: product.slug });
     loadAndNavigate({ navigate, to: product.link });
   }
   return {

package/src/core/hooks/use-telemetry-fallback.ts

@@ -0,0 +1,61 @@
+// TODO we need to create some common way to do this.
+export const useTelemetryFallback = () => ({
+  send: () => {},
+  sendPageViewedMessage: () => {},
+  sendErrorMessage: () => {},
+  sendClientErrorMessage: () => {},
+  sendBreadcrumbClickedMessage: () => {},
+  sendColorModeSwitchedMessage: () => {},
+  sendSidebarItemClickedMessage: () => {},
+  sendSidebarItemExpandedMessage: () => {},
+  sendSidebarItemCollapsedMessage: () => {},
+  sendChangeLayoutButtonClickedMessage: () => {},
+  sendEditPageLinkClickedMessage: () => {},
+  sendCodeSnippetReportedMessage: () => {},
+  sendNavbarMenuItemClickedMessage: () => {},
+  sendLoginButtonClickedMessage: () => {},
+  sendLoginProviderButtonClickedMessage: () => {},
+  sendLogoutMenuItemClickedMessage: () => {},
+  sendLogoClickedMessage: () => {},
+  sendTocItemClickedMessage: () => {},
+  sendCatalogFilterChangedMessage: () => {},
+  sendCatalogItemClickedMessage: () => {},
+  sendScorecardLinkClickedMessage: () => {},
+  sendBackToCatalogButtonClickedMessage: () => {},
+  sendSidebarDrilldownBackButtonClickedMessage: () => {},
+  sendFooterItemClickedMessage: () => {},
+  sendCatalogActionsButtonClickedMessage: () => {},
+  sendMobileMenuButtonCloseClickedMessage: () => {},
+  sendMobileMenuButtonOpenClickedMessage: () => {},
+  sendSearchInputResetButtonClickedMessage: () => {},
+  sendSearchRecentRemoveButtonClickedMessage: () => {},
+  sendSearchRecentClickedMessage: () => {},
+  sendRequestApiAccessButtonClickedMessage: () => {},
+  sendVersionPickerSelectionChangeMessage: () => {},
+  sendProductPickedMessage: () => {},
+  sendFilterCheckboxToggledMessage: () => {},
+  sendLanguagePickerLocaleChangedMessage: () => {},
+  sendSearchOpenedMessage: () => {},
+  sendSearchQueryMessage: () => {},
+  sendSearchAIQueryMessage: () => {},
+  sendFeedbackMessage: () => {},
+  sendSearchResultClickedMessage: () => {},
+  sendRedirectMessage: () => {},
+  sendOpenapiDocsMessage: () => {},
+  sendCopyCodeSnippetClickedMessage: () => {},
+  sendOpenapiDocsViewedMessage: () => {},
+  sendOpenapiDocsPerformanceMetricsMessage: () => {},
+  sendOpenapiDocsDownloadDefinitionClickedMessage: () => {},
+  sendOpenapiDocsSelectLanguageClickedMessage: () => {},
+  sendOpenapiDocsExpandCollapseAllClickedMessage: () => {},
+  sendOpenapiDocsSwitchServersClickedMessage: () => {},
+  sendOpenapiDocsExamplesSwitcherClickedMessage: () => {},
+  sendOpenapiDocsTryItOpenedMessage: () => {},
+  sendAsyncapiDocsViewedMessage: () => {},
+  sendAsyncapiDocsPerformanceMetricsMessage: () => {},
+  sendAsyncapiDocsSwitchMessageClickedMessage: () => {},
+  sendAsyncapiDocsSwitchExampleClickedMessage: () => {},
+  sendAsyncapiDocsMessageClickedMessage: () => {},
+  sendAsyncapiDocsServerModalOpenedMessage: () => {},
+  sendAsyncapiDocsDownloadDefinitionClickedMessage: () => {},
+});

package/src/core/hooks/use-theme-hooks.ts

@@ -3,6 +3,7 @@ import { useContext } from 'react';
 import type { ThemeHooks } from '../types/hooks';
 
 import { ThemeDataContext } from '../contexts/ThemeDataContext';
+import { useTelemetryFallback } from './use-telemetry-fallback';
 
 const fallbacks = {
   useTranslate: () => ({
@@ -10,7 +11,7 @@ const fallbacks = {
       (typeof options === 'string' ? options : options?.defaultValue) || value || '',
   }),
   useSubmitFeedback: () => ({ submitFeedback: () => {} }),
-  useTelemetry: () => ({ send: () => {} }),
+  useTelemetry: useTelemetryFallback,
   /**
    * @deprecated use `useTelemetry` instead
    **/

package/src/core/types/hooks.ts

@@ -1,3 +1,4 @@
+import type { AsyncApiRealmUI } from '@redocly/realm-asyncapi-sdk';
 import type {
   CatalogEntityConfig,
   PageData,
@@ -26,7 +27,6 @@ import type {
   SearchFacetQuery,
   AiSearchConversationItem,
 } from './search';
-import type { EventType, SendEventParams } from './telemetry';
 import type { SubmitFeedbackParams } from './feedback';
 import type { TFunction } from './l10n';
 import type { BreadcrumbItem } from './breadcrumb';
@@ -148,9 +148,15 @@ export type ThemeHooks = {
     initialData?: BffCatalogRelatedEntityList,
   ) => CatalogApiResults<BffCatalogRelatedEntity, BffCatalogRelatedEntityList>;
   useCatalogClassic: (config: CatalogConfig) => FilteredCatalog;
-  useTelemetry: () => {
-    send<TEventType extends EventType>(event: SendEventParams<TEventType>): void;
-  };
+  useTelemetry: () => Omit<
+    AsyncApiRealmUI.Telemetry,
+    | 'init'
+    | 'updateCloudEventData'
+    | 'forceFlush'
+    | 'startSpan'
+    | 'constructCloudEvent'
+    | 'sendToOtelService'
+  >;
   useUserTeams: () => string[];
   usePageData: () => PageData | null;
   usePageProps: <T extends Record<string, unknown>>() => PageProps & T;

package/src/core/types/index.ts

@@ -15,5 +15,4 @@ export * from './common';
 export * from './open-api-server';
 export * from './marker';
 export * from './code-walkthrough';
-export * from './telemetry';
 export * from './page-actions';

package/src/markdoc/components/CodeWalkthrough/CodeFilters.tsx

@@ -72,11 +72,11 @@ const FilterWrapper = styled.div`
   flex-wrap: wrap;
   position: sticky;
 
-  padding-top: calc(var(--spacing-xs) + var(--spacing-xl));
+  padding-top: var(--spacing-xl);
   padding-right: var(--spacing-xl);
   padding-left: var(--spacing-xl);
   padding-bottom: var(--spacing-xs);
-  top: calc(var(--navbar-height));
+  top: var(--navbar-height);
   background-color: var(--bg-color);
   z-index: 1;
   max-width: var(--md-content-max-width);

package/src/markdoc/components/CodeWalkthrough/CodePanel.tsx

@@ -58,6 +58,7 @@ const CodePanelWrapper = styled.div`
   min-width: 0;
   height: 100%;
   word-wrap: break-word;
+  margin-top: var(--spacing-xl);
 
   background-color: var(--code-panel-bg-color);
   border: 1px solid var(--code-panel-border-color);

package/src/markdoc/components/CodeWalkthrough/CodeToggle.tsx

@@ -26,7 +26,11 @@ export function CodeToggle(props: CodeToggleProps) {
     <ToggleWrapper data-component-name="Markdoc/CodeWalkthrough/CodeToggle">
       <ToggleContentWrapper>
         <ToggleSubtitle>
-          <Switch value={checked} onChange={(newValue) => changeControlState(id, newValue)} />
+          <Switch
+            value={checked}
+            onChange={(newValue) => changeControlState(id, newValue)}
+            stopPropagation
+          />
           <div>{label}</div>
         </ToggleSubtitle>
         {description ? (

package/src/markdoc/components/CodeWalkthrough/CodeWalkthrough.tsx

@@ -82,9 +82,14 @@ const DocsPanel = styled.div`
   min-height: 0;
   min-height: calc(100vh - var(--navbar-height));
 
+  padding-top: var(--spacing-xl);
   padding-right: var(--spacing-xs);
   padding-bottom: calc(var(--spacing-xs) + var(--spacing-xl));
   gap: var(--spacing-xl);
+
+  &:has([data-component-name='Markdoc/CodeWalkthrough/CodeFilters']) {
+    padding-top: 0;
+  }
 `;
 
 const ContentWrapper = styled.div`
@@ -111,13 +116,7 @@ const ContentWrapper = styled.div`
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
 
-  &:first-child {
-    padding-top: var(--spacing-sm);
-  }
-
-  &:not(:first-child) {
-    & > *:first-child {
-      margin-top: 0;
-    }
+  && > *:first-child {
+    margin-top: 0;
   }
 `;

package/lib/core/types/telemetry.d.ts

@@ -1,17 +0,0 @@
-import { AsyncApiRealm } from '@redocly/realm-asyncapi-sdk';
-type ExtractEventType<T> = T extends {
-    type: infer EventType;
-} ? EventType : never;
-export type EventType = ExtractEventType<AsyncApiRealm.Messages>;
-type GetMessageForEventType<TEventType extends EventType> = Extract<AsyncApiRealm.Messages, {
-    type: TEventType;
-}>;
-type ExtractEventDataForType<TEventType extends EventType> = GetMessageForEventType<TEventType> extends {
-    data: infer Data;
-} ? Data : never;
-export type EventPayload<TEventType extends EventType> = ExtractEventDataForType<TEventType>;
-export interface SendEventParams<TEventType extends EventType> {
-    type: TEventType;
-    payload?: EventPayload<TEventType>;
-}
-export {};

package/lib/core/types/telemetry.js

@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=telemetry.js.map

package/src/core/types/telemetry.ts

@@ -1,28 +0,0 @@
-import { AsyncApiRealm } from '@redocly/realm-asyncapi-sdk';
-
-type ExtractEventType<T> = T extends {
-  type: infer EventType;
-}
-  ? EventType
-  : never;
-
-export type EventType = ExtractEventType<AsyncApiRealm.Messages>;
-
-type GetMessageForEventType<TEventType extends EventType> = Extract<
-  AsyncApiRealm.Messages,
-  { type: TEventType }
->;
-
-type ExtractEventDataForType<TEventType extends EventType> =
-  GetMessageForEventType<TEventType> extends {
-    data: infer Data;
-  }
-    ? Data
-    : never;
-
-export type EventPayload<TEventType extends EventType> = ExtractEventDataForType<TEventType>;
-
-export interface SendEventParams<TEventType extends EventType> {
-  type: TEventType;
-  payload?: EventPayload<TEventType>;
-}