@redocly/theme 0.47.0 → 0.47.1

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-steps.js

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCodeWalkthroughSteps = useCodeWalkthroughSteps;
+const react_1 = require("react");
+const react_router_dom_1 = require("react-router-dom");
+const utils_1 = require("../../../core/utils");
+const constants_1 = require("../../../core/constants");
+function useCodeWalkthroughSteps(steps) {
+    const location = (0, react_router_dom_1.useLocation)();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const searchParams = (0, react_1.useMemo)(() => new URLSearchParams(location.search), [location.search]);
+    const observerRef = (0, react_1.useRef)(null);
+    const filtersElementRef = (0, react_1.useRef)(null);
+    const lockObserver = (0, react_1.useRef)(false);
+    // Track observed elements in case new observer needs to be created
+    const observedElementsRef = (0, react_1.useRef)(new Set());
+    const [activeStep, setActiveStep] = (0, react_1.useState)(searchParams.get(constants_1.ACTIVE_STEP_QUERY_PARAM));
+    const register = (0, react_1.useCallback)((element) => {
+        // for some reason, the observer is not ready immediately
+        setTimeout(() => {
+            if (observerRef.current) {
+                const stepKey = Number(element.dataset.stepKey);
+                if (Number.isInteger(stepKey) && stepKey >= 0) {
+                    steps[stepKey].compRef = element;
+                }
+                observerRef.current.observe(element);
+                observedElementsRef.current.add(element);
+            }
+        }, 10);
+    }, [steps]);
+    const unregister = (0, react_1.useCallback)((element) => {
+        if (observerRef.current) {
+            const stepKey = Number(element.dataset.stepKey);
+            if (Number.isInteger(stepKey) && stepKey >= 0) {
+                steps[stepKey].compRef = undefined;
+            }
+            observerRef.current.unobserve(element);
+            observedElementsRef.current.delete(element);
+        }
+    }, [steps]);
+    const observerCallback = (0, react_1.useCallback)((entries) => {
+        var _a, _b, _c;
+        if (lockObserver.current) {
+            return;
+        }
+        const stepsEntries = [];
+        for (const entry of entries) {
+            const { target } = entry;
+            const stepKey = Number((_a = target === null || target === void 0 ? void 0 : target.dataset) === null || _a === void 0 ? void 0 : _a.stepKey);
+            const stepActive = ((_b = target === null || target === void 0 ? void 0 : target.dataset) === null || _b === void 0 ? void 0 : _b.stepActive) === 'true';
+            if (!Number.isInteger(stepKey) || stepKey < 0) {
+                continue;
+            }
+            const step = steps[stepKey];
+            step.active = stepActive;
+            stepsEntries.push(entry);
+        }
+        for (const stepEntry of stepsEntries) {
+            const { target, intersectionRatio, boundingClientRect, rootBounds, isIntersecting } = stepEntry;
+            const stepKey = Number((_c = target === null || target === void 0 ? void 0 : target.dataset) === null || _c === void 0 ? void 0 : _c.stepKey);
+            const step = steps[stepKey];
+            const renderedSteps = steps.filter((step) => Boolean(step.compRef));
+            const stepIndex = renderedSteps.findIndex((renderedStep) => renderedStep.stepKey === step.stepKey);
+            const { next } = (0, utils_1.getAdjacentValues)(renderedSteps, stepIndex);
+            const intersectionAtTop = (rootBounds === null || rootBounds === void 0 ? void 0 : rootBounds.bottom) !== undefined && boundingClientRect.top < rootBounds.top;
+            const stepGoesIn = isIntersecting;
+            if (intersectionRatio < 1 && intersectionRatio !== 0 && intersectionAtTop) {
+                let newStep = null;
+                if (stepGoesIn) {
+                    newStep = step.id;
+                }
+                else if (next) {
+                    newStep = next.id;
+                }
+                if (newStep !== activeStep) {
+                    setActiveStep(newStep);
+                }
+                break;
+            }
+        }
+    }, [steps, activeStep]);
+    (0, react_1.useEffect)(() => {
+        var _a, _b, _c;
+        const filtersElementHeight = ((_a = filtersElementRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0;
+        const navbarHeight = ((_b = document.querySelector('nav')) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0;
+        const newObserver = new IntersectionObserver(observerCallback, {
+            threshold: [0.8],
+            rootMargin: `-${filtersElementHeight + navbarHeight}px 0px 0px 0px`,
+        });
+        for (const observedElement of observedElementsRef.current) {
+            newObserver.observe(observedElement);
+        }
+        // Unobserve all from the old observer
+        (_c = observerRef.current) === null || _c === void 0 ? void 0 : _c.disconnect();
+        observerRef.current = newObserver;
+    }, [observerCallback]);
+    /**
+     * Update the URL search params with the current state of the filters and inputs
+     */
+    (0, react_1.useEffect)(() => {
+        const newSearchParams = new URLSearchParams(Array.from(searchParams.entries()));
+        if (activeStep) {
+            newSearchParams.set(constants_1.ACTIVE_STEP_QUERY_PARAM, activeStep);
+        }
+        else {
+            newSearchParams.delete(constants_1.ACTIVE_STEP_QUERY_PARAM);
+        }
+        const newSearch = newSearchParams.toString();
+        if (newSearch === location.search.substring(1))
+            return;
+        navigate({ search: newSearch });
+        // Ignore searchParams in dependency array to avoid infinite re-renders
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeStep, navigate, location]);
+    return { register, unregister, lockObserver, filtersElementRef, activeStep, setActiveStep };
+}
+//# sourceMappingURL=use-code-walkthrough-steps.js.map

package/lib/core/hooks/code-walkthrough/use-code-walkthrough.d.ts

@@ -0,0 +1,14 @@
+import type { CodeWalkthroughFileset, CodeWalkthroughFile, CodeWalkthroughStepAttr, CodeWalkthroughFilter, InputsMarkdocAttr, TogglesMarkdocAttr } from '@redocly/config';
+import { type WalkthroughControlsState, type WalkthroughStepsState } from '../../../core/hooks';
+export type WalkthroughState = {
+    stepsState: WalkthroughStepsState;
+    controlsState: WalkthroughControlsState;
+    downloadAssociatedFiles: CodeWalkthroughFile[];
+    files: CodeWalkthroughFile[];
+};
+export declare function useCodeWalkthrough(steps: CodeWalkthroughStepAttr[], attributes: {
+    filters: Record<string, CodeWalkthroughFilter>;
+    filesets: CodeWalkthroughFileset[];
+    inputs: InputsMarkdocAttr;
+    toggles: TogglesMarkdocAttr;
+}): WalkthroughState;

package/lib/core/hooks/code-walkthrough/use-code-walkthrough.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCodeWalkthrough = useCodeWalkthrough;
+const hooks_1 = require("../../../core/hooks");
+function useCodeWalkthrough(steps, attributes) {
+    const { filters, filesets, inputs, toggles } = attributes;
+    const stepsState = (0, hooks_1.useCodeWalkthroughSteps)(steps);
+    const controlsState = (0, hooks_1.useCodeWalkthroughControls)(filters, inputs, toggles);
+    const files = filesets
+        .filter((fileset) => controlsState.areConditionsMet(fileset))
+        .flatMap((fileset) => fileset.files || []);
+    const downloadAssociatedFiles = filesets
+        .filter((fileset) => controlsState.areConditionsMet(fileset))
+        .flatMap((fileset) => fileset.downloadAssociatedFiles || []);
+    return {
+        stepsState,
+        controlsState,
+        downloadAssociatedFiles,
+        files,
+    };
+}
+//# sourceMappingURL=use-code-walkthrough.js.map

package/lib/core/hooks/index.d.ts

@@ -28,3 +28,7 @@ export * from '../../core/hooks/search/use-search-dialog';
 export * from '../../core/hooks/search/use-search-filter';
 export * from '../../core/hooks/use-controlled-state';
 export * from '../../core/hooks/use-codeblock-tabs-controls';
+export * from '../../core/hooks/code-walkthrough/use-code-walkthrough';
+export * from '../../core/hooks/code-walkthrough/use-code-walkthrough-steps';
+export * from '../../core/hooks/code-walkthrough/use-code-walkthrough-controls';
+export * from '../../core/hooks/code-walkthrough/use-code-panel';

package/lib/core/hooks/index.js

@@ -44,4 +44,8 @@ __exportStar(require("../../core/hooks/search/use-search-dialog"), exports);
 __exportStar(require("../../core/hooks/search/use-search-filter"), exports);
 __exportStar(require("../../core/hooks/use-controlled-state"), exports);
 __exportStar(require("../../core/hooks/use-codeblock-tabs-controls"), exports);
+__exportStar(require("../../core/hooks/code-walkthrough/use-code-walkthrough"), exports);
+__exportStar(require("../../core/hooks/code-walkthrough/use-code-walkthrough-steps"), exports);
+__exportStar(require("../../core/hooks/code-walkthrough/use-code-walkthrough-controls"), exports);
+__exportStar(require("../../core/hooks/code-walkthrough/use-code-panel"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/styles/global.js

@@ -38,6 +38,7 @@ const variables_32 = require("../../components/VersionPicker/variables");
 const variables_33 = require("../../components/DatePicker/variables");
 const variables_34 = require("../../components/Switch/variables");
 const variables_35 = require("../../markdoc/components/Cards/variables");
+const variables_36 = require("../../markdoc/components/CodeWalkthrough/variables");
 const themeColors = (0, styled_components_1.css) `
   /* === Palette === */
   /**
@@ -1152,6 +1153,7 @@ exports.styles = (0, styled_components_1.css) `
     ${variables_35.cards}
     ${variables_8.catalog}
     ${variables_21.code}
+    ${variables_36.codeWalkthrough}
     ${docsDropdown}
     ${variables_12.dropdown}
     ${error}

package/lib/core/templates/Markdown.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { UiAccessibleConfig } from '../../config';
 import type { MdHeading } from '../../core/types';
-type MarkdownTemplateProps = {
+export type MarkdownTemplateProps = {
     pageProps: {
         frontmatter?: UiAccessibleConfig;
         headings?: (MdHeading | null)[];
@@ -9,7 +9,13 @@ type MarkdownTemplateProps = {
             to: string;
         };
         lastModified?: string | null;
+        metadata: {
+            markdoc: {
+                tagList: string[];
+                [key: string]: unknown;
+            };
+            [key: string]: unknown;
+        };
     };
 };
 export default function ({ pageProps, children }: React.PropsWithChildren<MarkdownTemplateProps>): React.JSX.Element;
-export {};

package/lib/core/templates/Markdown.js

@@ -32,6 +32,7 @@ const Markdown_1 = require("../../components/Markdown/Markdown");
 const TableOfContent_1 = require("../../components/TableOfContent/TableOfContent");
 const Feedback_1 = require("../../components/Feedback/Feedback");
 const utils_1 = require("../../core/utils");
+const CodeWalkthroughLayout_1 = require("../../layouts/CodeWalkthroughLayout");
 function default_1({ pageProps, children }) {
     var _a;
     const [wrapperElement, setWrapperElement] = React.useState(null);
@@ -63,7 +64,9 @@ function default_1({ pageProps, children }) {
     if (utils_1.IS_BROWSER) {
         (0, utils_1.onDocumentReady)(utils_1.extendDetailsBehaviour);
     }
-    return (React.createElement(DocumentationLayout_1.DocumentationLayout, Object.assign({}, documentationLayoutProps),
-        React.createElement(Markdown_1.Markdown, { ref: wrapperRefCb }, children)));
+    const document = React.createElement(Markdown_1.Markdown, { ref: wrapperRefCb }, children);
+    const tagList = pageProps.metadata.markdoc.tagList;
+    const withCodeWalkthrough = Boolean(Array.isArray(tagList) && tagList.includes('code-walkthrough'));
+    return withCodeWalkthrough ? (React.createElement(CodeWalkthroughLayout_1.CodeWalkthroughLayout, null, document)) : (React.createElement(DocumentationLayout_1.DocumentationLayout, Object.assign({}, documentationLayoutProps), document));
 }
 //# sourceMappingURL=Markdown.js.map

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

@@ -1,4 +1,5 @@
 import type { PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
+import type { ShikiTransformer } from '@shikijs/types';
 import type { Callback, TFunction as TFunc } from 'i18next';
 import type { To, Location, NavigateFunction } from 'react-router-dom';
 import type { CatalogConfig, ProductUiConfig } from '../../config';
@@ -103,6 +104,7 @@ export type ThemeHooks = {
             withLineNumbers?: boolean;
             startLineNumber?: number;
             highlight?: string;
+            customTransformer?: ShikiTransformer;
         }) => string;
     };
     useLoadAndNavigate: () => (options: {

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

@@ -1,5 +1,5 @@
 import type { TOptions } from 'i18next';
-export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.aiButton' | 'search.ai.label' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeLayout' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.settings.reasons.send' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.anonymousUserEmail.placeholder' | 'feedback.settings.anonymousUserEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'page.nextButton' | 'page.previousButton' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.deprecated' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.noResponseExample' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.scopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced';
+export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.aiButton' | 'search.ai.label' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeLayout' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.settings.reasons.send' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.anonymousUserEmail.placeholder' | 'feedback.settings.anonymousUserEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'page.nextButton' | 'page.previousButton' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.deprecated' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.noResponseExample' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.scopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'codeWalkthrough.download' | 'codeWalkthrough.preview';
 export type Locale = {
     code: string;
     name: string;

package/lib/core/utils/download-code-walkthrough.d.ts

@@ -0,0 +1,4 @@
+import type { CodeWalkthroughFile, InputsState } from '@redocly/config';
+export declare function downloadCodeWalkthrough(files: CodeWalkthroughFile[], state: Record<string, {
+    value: string | boolean;
+}>, inputsState: InputsState): Promise<void>;

package/lib/core/utils/download-code-walkthrough.js

@@ -0,0 +1,32 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.downloadCodeWalkthrough = downloadCodeWalkthrough;
+const file_saver_1 = require("file-saver");
+const jszip_1 = __importDefault(require("jszip"));
+const utils_1 = require("../../core/utils");
+// https://github.com/Stuk/jszip/issues/196#issuecomment-69503828
+jszip_1.default.support.nodebuffer = false;
+function downloadCodeWalkthrough(files, state, inputsState) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const zip = new jszip_1.default();
+        for (const file of files) {
+            const fileContent = (0, utils_1.getCodeWalkthroughFileText)(file, state, inputsState);
+            zip.file(file.basename, fileContent);
+        }
+        const zipContent = yield zip.generateAsync({ type: 'blob' });
+        (0, file_saver_1.saveAs)(zipContent, 'sample-code.zip');
+    });
+}
+//# sourceMappingURL=download-code-walkthrough.js.map

package/lib/core/utils/get-code-walkthrough-file-text.d.ts

@@ -0,0 +1,4 @@
+import type { CodeWalkthroughFile, InputsState } from '@redocly/config';
+export declare function getCodeWalkthroughFileText(file: CodeWalkthroughFile, state: Record<string, {
+    value: string | boolean;
+}>, inputsState: InputsState): string;

package/lib/core/utils/get-code-walkthrough-file-text.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCodeWalkthroughFileText = getCodeWalkthroughFileText;
+const utils_1 = require("../../core/utils");
+function getCodeWalkthroughFileText(file, state, inputsState) {
+    var _a;
+    const contentChunks = (_a = file === null || file === void 0 ? void 0 : file.content.flatMap((node) => getChunkText(node, state, inputsState))) !== null && _a !== void 0 ? _a : [];
+    return contentChunks.join('\n');
+}
+function getChunkText(node, state, inputsState) {
+    if (typeof node === 'string') {
+        const replacedNode = (0, utils_1.replaceInputsWithValue)(node, inputsState);
+        return [replacedNode];
+    }
+    else {
+        if (!(0, utils_1.matchCodeWalkthroughConditions)(node.condition || {}, state)) {
+            return [];
+        }
+        return node.children.flatMap((child) => getChunkText(child, state, inputsState));
+    }
+}
+//# sourceMappingURL=get-code-walkthrough-file-text.js.map

package/lib/core/utils/get-file-icon.d.ts

@@ -0,0 +1,2 @@
+import type { IconProps } from '../../icons/types';
+export declare function getFileIconByExt(ext: string): import("react").FunctionComponent<IconProps>;

package/lib/core/utils/get-file-icon.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFileIconByExt = getFileIconByExt;
+const DocumentBlankIcon_1 = require("../../icons/DocumentBlankIcon/DocumentBlankIcon");
+const DocumentYamlIcon_1 = require("../../icons/DocumentYamlIcon/DocumentYamlIcon");
+const DocumentJsonIcon_1 = require("../../icons/DocumentJsonIcon/DocumentJsonIcon");
+const DocumentJsIcon_1 = require("../../icons/DocumentJsIcon/DocumentJsIcon");
+const DocumentTsIcon_1 = require("../../icons/DocumentTsIcon/DocumentTsIcon");
+const DocumentCssIcon_1 = require("../../icons/DocumentCssIcon/DocumentCssIcon");
+const DocumentHtmlIcon_1 = require("../../icons/DocumentHtmlIcon/DocumentHtmlIcon");
+const DocumentReactIcon_1 = require("../../icons/DocumentReactIcon/DocumentReactIcon");
+const DocumentMarkdownIcon_1 = require("../../icons/DocumentMarkdownIcon/DocumentMarkdownIcon");
+const DocumentGraphqlIcon_1 = require("../../icons/DocumentGraphqlIcon/DocumentGraphqlIcon");
+const fileIconMap = {
+    yaml: DocumentYamlIcon_1.DocumentYamlIcon,
+    yml: DocumentYamlIcon_1.DocumentYamlIcon,
+    json: DocumentJsonIcon_1.DocumentJsonIcon,
+    js: DocumentJsIcon_1.DocumentJsIcon,
+    ts: DocumentTsIcon_1.DocumentTsIcon,
+    css: DocumentCssIcon_1.DocumentCssIcon,
+    html: DocumentHtmlIcon_1.DocumentHtmlIcon,
+    jsx: DocumentReactIcon_1.DocumentReactIcon,
+    tsx: DocumentReactIcon_1.DocumentReactIcon,
+    md: DocumentMarkdownIcon_1.DocumentMarkdownIcon,
+    graphql: DocumentGraphqlIcon_1.DocumentGraphqlIcon,
+    gql: DocumentGraphqlIcon_1.DocumentGraphqlIcon,
+};
+function getFileIconByExt(ext) {
+    return fileIconMap[ext] || DocumentBlankIcon_1.DocumentBlankIcon;
+}
+//# sourceMappingURL=get-file-icon.js.map

package/lib/core/utils/index.d.ts

@@ -25,3 +25,8 @@ export * from '../../core/utils/details';
 export * from '../../core/utils/get-navbar-element';
 export * from '../../core/utils/with-load-progress';
 export * from '../../core/utils/text-trimmer';
+export * from '../../core/utils/get-code-walkthrough-file-text';
+export * from '../../core/utils/download-code-walkthrough';
+export * from '../../core/utils/get-file-icon';
+export * from '../../core/utils/match-code-walkthrough-conditions';
+export * from '../../core/utils/replace-inputs-with-value';

package/lib/core/utils/index.js

@@ -41,4 +41,9 @@ __exportStar(require("../../core/utils/details"), exports);
 __exportStar(require("../../core/utils/get-navbar-element"), exports);
 __exportStar(require("../../core/utils/with-load-progress"), exports);
 __exportStar(require("../../core/utils/text-trimmer"), exports);
+__exportStar(require("../../core/utils/get-code-walkthrough-file-text"), exports);
+__exportStar(require("../../core/utils/download-code-walkthrough"), exports);
+__exportStar(require("../../core/utils/get-file-icon"), exports);
+__exportStar(require("../../core/utils/match-code-walkthrough-conditions"), exports);
+__exportStar(require("../../core/utils/replace-inputs-with-value"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/utils/js-utils.d.ts

@@ -6,3 +6,33 @@ export declare function toStringIfDefined(value: unknown): string | undefined;
  * Returns true when the function executed in browser.
  */
 export declare function isBrowser(): boolean;
+export declare function isPlainObject(obj: any): boolean;
+/**
+ * Returns the previous and next values in an array for a given index.
+ *
+ * Edge cases:
+ * - If the index is `0`, `prev` will be `null`.
+ * - If the index is the last position in the array, `next` will be `null`.
+ * - If the index is out of bounds (negative or greater than the last index), both `prev` and `next` will be `null`.
+ *
+ * @example
+ * const array = [10, 20, 30, 40];
+ * getAdjacentValues(array, 2);
+ * // returns: { prev: 20, next: 40 }
+ *
+ * getAdjacentValues(array, 0);
+ * // returns: { prev: null, next: 20 }
+ *
+ * getAdjacentValues(array, 3);
+ * // returns: { prev: 30, next: null }
+ *
+ * getAdjacentValues(array, -1);
+ * // returns: { prev: null, next: null }
+ *
+ * getAdjacentValues(array, 4);
+ * // returns: { prev: null, next: null }
+ */
+export declare function getAdjacentValues<T>(array: T[], index: number): {
+    prev: T | null;
+    next: T | null;
+};

package/lib/core/utils/js-utils.js

@@ -3,6 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.findDeepFirst = findDeepFirst;
 exports.toStringIfDefined = toStringIfDefined;
 exports.isBrowser = isBrowser;
+exports.isPlainObject = isPlainObject;
+exports.getAdjacentValues = getAdjacentValues;
 function findDeepFirst(list, cb) {
     for (const item of list) {
         if (cb(item) === true) {
@@ -24,4 +26,43 @@ function toStringIfDefined(value) {
 function isBrowser() {
     return typeof window !== 'undefined' && 'HTMLElement' in window;
 }
+function isPlainObject(obj) {
+    return (typeof obj === 'object' &&
+        obj !== null &&
+        !Array.isArray(obj) &&
+        Object.prototype.toString.call(obj) === '[object Object]');
+}
+/**
+ * Returns the previous and next values in an array for a given index.
+ *
+ * Edge cases:
+ * - If the index is `0`, `prev` will be `null`.
+ * - If the index is the last position in the array, `next` will be `null`.
+ * - If the index is out of bounds (negative or greater than the last index), both `prev` and `next` will be `null`.
+ *
+ * @example
+ * const array = [10, 20, 30, 40];
+ * getAdjacentValues(array, 2);
+ * // returns: { prev: 20, next: 40 }
+ *
+ * getAdjacentValues(array, 0);
+ * // returns: { prev: null, next: 20 }
+ *
+ * getAdjacentValues(array, 3);
+ * // returns: { prev: 30, next: null }
+ *
+ * getAdjacentValues(array, -1);
+ * // returns: { prev: null, next: null }
+ *
+ * getAdjacentValues(array, 4);
+ * // returns: { prev: null, next: null }
+ */
+function getAdjacentValues(array, index) {
+    if (index < 0 || index >= array.length) {
+        return { prev: null, next: null };
+    }
+    const prevValue = index > 0 ? array[index - 1] : null;
+    const nextValue = index < array.length - 1 ? array[index + 1] : null;
+    return { prev: prevValue, next: nextValue };
+}
 //# sourceMappingURL=js-utils.js.map

package/lib/core/utils/match-code-walkthrough-conditions.d.ts

@@ -0,0 +1,4 @@
+import type { CodeWalkthroughConditionsObject } from '@redocly/config';
+export declare function matchCodeWalkthroughConditions(conditions: CodeWalkthroughConditionsObject | undefined, state: Record<string, {
+    value: string | boolean;
+}>): boolean;

package/lib/core/utils/match-code-walkthrough-conditions.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.matchCodeWalkthroughConditions = matchCodeWalkthroughConditions;
+const utils_1 = require("../../core/utils");
+function matchCodeWalkthroughConditions(conditions = {}, state) {
+    const { when, unless } = conditions;
+    function evaluateCondition(key, value) {
+        var _a;
+        const stateValue = (_a = state[key]) === null || _a === void 0 ? void 0 : _a.value;
+        if (Array.isArray(value) && typeof stateValue === 'string') {
+            return value.includes(stateValue);
+        }
+        return stateValue === value;
+    }
+    const matchesWhen = (0, utils_1.isObject)(when)
+        ? Object.entries(when).every(([key, value]) => evaluateCondition(key, value))
+        : true;
+    const matchesUnless = (0, utils_1.isObject)(unless)
+        ? Object.entries(unless).some(([key, value]) => evaluateCondition(key, value))
+        : false;
+    return matchesWhen && !matchesUnless;
+}
+//# sourceMappingURL=match-code-walkthrough-conditions.js.map

package/lib/core/utils/replace-inputs-with-value.d.ts

@@ -0,0 +1,3 @@
+export declare function replaceInputsWithValue(node: string, inputs: Record<string, {
+    value: string;
+}>): string;

package/lib/core/utils/replace-inputs-with-value.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.replaceInputsWithValue = replaceInputsWithValue;
+const inputRegex = /(?:\/\*|<!--|#|\/\/)\s*@redocly-input\s*\{"id":\s*"(.*?)"\}\s*(?:\*\/|-->)?/g;
+function replaceInputsWithValue(node, inputs) {
+    return node.replace(inputRegex, (match, inputKey) => {
+        var _a;
+        if (Object.prototype.hasOwnProperty.call(inputs, inputKey)) {
+            return (_a = inputs[inputKey]) === null || _a === void 0 ? void 0 : _a.value;
+        }
+        else {
+            return match;
+        }
+    });
+}
+//# sourceMappingURL=replace-inputs-with-value.js.map

package/lib/icons/DocumentCssIcon/DocumentCssIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const DocumentCssIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/DocumentCssIcon/DocumentCssIcon.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DocumentCssIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("g", { id: "iconCSS" },
+        react_1.default.createElement("path", { id: "Vector", d: "M3.33329 2L2.89996 4.22667H11.96L11.6666 5.66667H2.61329L2.17329 7.88667H11.2333L10.7266 10.4267L7.07329 11.6333L3.90662 10.4267L4.12662 9.33333H1.89996L1.37329 12L6.60662 14L12.64 12L13.44 7.98L13.6 7.17333L14.6266 2H3.33329Z", fill: "#3B3C45" }))));
+exports.DocumentCssIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/DocumentCssIcon/DocumentCssIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=DocumentCssIcon.js.map

package/lib/icons/DocumentCssIcon/index.d.ts

@@ -0,0 +1 @@
+export { DocumentCssIcon } from '../../icons/DocumentCssIcon/DocumentCssIcon';

package/lib/icons/DocumentCssIcon/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DocumentCssIcon = void 0;
+var DocumentCssIcon_1 = require("../../icons/DocumentCssIcon/DocumentCssIcon");
+Object.defineProperty(exports, "DocumentCssIcon", { enumerable: true, get: function () { return DocumentCssIcon_1.DocumentCssIcon; } });
+//# sourceMappingURL=index.js.map

package/lib/icons/DocumentGraphqlIcon/DocumentGraphqlIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const DocumentGraphqlIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;