@redocly/theme/src/core/hooks/code-walkthrough/use-code-walkthrough.ts

Shared UI components lib

import type {
  CodeWalkthroughFile,
  CodeWalkthroughStepAttr,
  CodeWalkthroughAttr,
} from '@redocly/config';

import {
  useCodeWalkthroughSteps,
  useCodeWalkthroughControls,
  type WalkthroughControlsState,
  type WalkthroughStepsState,
} from '@redocly/theme/core/hooks';

export type WalkthroughState = {
  stepsState: WalkthroughStepsState;
  controlsState: WalkthroughControlsState;
  downloadAssociatedFiles: CodeWalkthroughFile[];
  files: CodeWalkthroughFile[];
};

export function useCodeWalkthrough(
  steps: CodeWalkthroughStepAttr[],
  attributes: Omit<CodeWalkthroughAttr, 'steps' | 'preview'>,
): WalkthroughState {
  const { filters, filesets, inputs, toggles, __idx } = attributes;
  /* 
    We only enable deep linking for the first CodeWalkthrough, 
    because we don't expect more than one on the same page. 
    Any subsequent walkthroughs have it disabled to avoid 
    collisions/conflicts in the URL.
  */
  const enableDeepLink = __idx === 1;

  const stepsState = useCodeWalkthroughSteps(steps, enableDeepLink);
  const controlsState = useCodeWalkthroughControls(filters, inputs, toggles, enableDeepLink);

  const files: CodeWalkthroughFile[] = filesets
    .filter((fileset) => controlsState.areConditionsMet(fileset))
    .flatMap((fileset) => fileset.files || []);

  const downloadAssociatedFiles: CodeWalkthroughFile[] = filesets
    .filter((fileset) => controlsState.areConditionsMet(fileset))
    .flatMap((fileset) => fileset.downloadAssociatedFiles || []);

  return {
    stepsState,
    controlsState,
    downloadAssociatedFiles,
    files,
  };
}