@redocly/theme 0.47.0 → 0.48.0

package/src/icons/DocumentReactIcon/DocumentReactIcon.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g id="iconReact">
+      <path
+        id="Vector"
+        d="M7.99992 6.74022C8.68658 6.74022 9.24658 7.30022 9.24658 8.00022C9.24658 8.66689 8.68658 9.23356 7.99992 9.23356C7.31325 9.23356 6.75325 8.66689 6.75325 8.00022C6.75325 7.30022 7.31325 6.74022 7.99992 6.74022ZM4.91325 13.3336C5.33325 13.5869 6.25325 13.2002 7.31325 12.2002C6.96659 11.8069 6.62659 11.3802 6.30658 10.9336C5.76935 10.8821 5.23526 10.802 4.70658 10.6936C4.36659 12.1202 4.49325 13.1002 4.91325 13.3336ZM5.38658 9.50689L5.19325 9.16689C5.11992 9.36022 5.04659 9.55356 4.99992 9.74022C5.17992 9.78022 5.37992 9.81356 5.58659 9.84689L5.38658 9.50689ZM9.74658 9.00022L10.2866 8.00022L9.74658 7.00022C9.54659 6.64689 9.33325 6.33356 9.13992 6.02022C8.77992 6.00022 8.39992 6.00022 7.99992 6.00022C7.59992 6.00022 7.21992 6.00022 6.85992 6.02022C6.66658 6.33356 6.45325 6.64689 6.25325 7.00022L5.71325 8.00022L6.25325 9.00022C6.45325 9.35356 6.66658 9.66689 6.85992 9.98022C7.21992 10.0002 7.59992 10.0002 7.99992 10.0002C8.39992 10.0002 8.77992 10.0002 9.13992 9.98022C9.33325 9.66689 9.54659 9.35356 9.74658 9.00022ZM7.99992 4.52022C7.87325 4.66689 7.73992 4.82022 7.60658 5.00022H8.39325C8.25992 4.82022 8.12659 4.66689 7.99992 4.52022ZM7.99992 11.4802C8.12659 11.3336 8.25992 11.1802 8.39325 11.0002H7.60658C7.73992 11.1802 7.87325 11.3336 7.99992 11.4802ZM11.0799 2.66689C10.6666 2.41356 9.74658 2.80022 8.68658 3.80022C9.03325 4.19356 9.37325 4.62022 9.69325 5.06689C10.2399 5.12022 10.7799 5.20022 11.2933 5.30689C11.6333 3.88022 11.5066 2.90022 11.0799 2.66689ZM10.6133 6.49356L10.8066 6.83356C10.8799 6.64022 10.9533 6.44689 10.9999 6.26022C10.8199 6.22022 10.6199 6.18689 10.4133 6.15356L10.6133 6.49356ZM11.5799 1.79356C12.5599 2.35356 12.6666 3.82689 12.2533 5.54689C13.9466 6.04689 15.1666 6.87356 15.1666 8.00022C15.1666 9.12689 13.9466 9.95356 12.2533 10.4536C12.6666 12.1736 12.5599 13.6469 11.5799 14.2069C10.6066 14.7669 9.27992 14.1269 7.99992 12.9069C6.71992 14.1269 5.39325 14.7669 4.41325 14.2069C3.43992 13.6469 3.33325 12.1736 3.74659 10.4536C2.05325 9.95356 0.833252 9.12689 0.833252 8.00022C0.833252 6.87356 2.05325 6.04689 3.74659 5.54689C3.33325 3.82689 3.43992 2.35356 4.41325 1.79356C5.39325 1.23356 6.71992 1.87356 7.99992 3.09356C9.27992 1.87356 10.6066 1.23356 11.5799 1.79356ZM11.3866 8.00022C11.6133 8.50022 11.8133 9.00022 11.9799 9.50689C13.3799 9.08689 14.1666 8.48689 14.1666 8.00022C14.1666 7.51356 13.3799 6.91356 11.9799 6.49356C11.8133 7.00022 11.6133 7.50022 11.3866 8.00022ZM4.61325 8.00022C4.38659 7.50022 4.18659 7.00022 4.01992 6.49356C2.61992 6.91356 1.83325 7.51356 1.83325 8.00022C1.83325 8.48689 2.61992 9.08689 4.01992 9.50689C4.18659 9.00022 4.38659 8.50022 4.61325 8.00022ZM10.6133 9.50689L10.4133 9.84689C10.6199 9.81356 10.8199 9.78022 10.9999 9.74022C10.9533 9.55356 10.8799 9.36022 10.8066 9.16689L10.6133 9.50689ZM8.68658 12.2002C9.74658 13.2002 10.6666 13.5869 11.0799 13.3336C11.5066 13.1002 11.6333 12.1202 11.2933 10.6936C10.7799 10.8002 10.2399 10.8802 9.69325 10.9336C9.37325 11.3802 9.03325 11.8069 8.68658 12.2002ZM5.38658 6.49356L5.58659 6.15356C5.37992 6.18689 5.17992 6.22022 4.99992 6.26022C5.04659 6.44689 5.11992 6.64022 5.19325 6.83356L5.38658 6.49356ZM7.31325 3.80022C6.25325 2.80022 5.33325 2.41356 4.91325 2.66689C4.49325 2.90022 4.36659 3.88022 4.70658 5.30689C5.23526 5.19842 5.76935 5.1183 6.30658 5.06689C6.62659 4.62022 6.96659 4.19356 7.31325 3.80022Z"
+        fill="#3B3C45"
+      />
+    </g>
+  </svg>
+);
+
+export const DocumentReactIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/DocumentReactIcon/DocumentReactIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/DocumentReactIcon/index.ts

@@ -0,0 +1 @@
+export { DocumentReactIcon } from '@redocly/theme/icons/DocumentReactIcon/DocumentReactIcon';

package/src/icons/DocumentTsIcon/DocumentTsIcon.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g id="iconTS">
+      <path
+        id="Vector"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1.47192 1.47168V14.5277H14.5279V1.47168H1.47192ZM11.3926 7.81312V7.81331C11.5177 7.81369 11.6601 7.82013 11.7671 7.83174C12.2029 7.87888 12.5423 8.06691 12.831 8.42106C12.9748 8.59747 13.024 8.67465 13.0135 8.70768C13.0067 8.72899 12.9081 8.79965 12.5944 9.00784C12.2863 9.21242 12.1871 9.27369 12.164 9.27369C12.1406 9.27369 12.0919 9.22358 12.0217 9.12736C11.8865 8.94211 11.7485 8.85757 11.5352 8.82938C11.3057 8.79898 11.0999 8.8713 10.9991 9.01779C10.9129 9.14298 10.8999 9.34438 10.9684 9.49075C11.0478 9.66026 11.1914 9.75398 11.7417 9.9953C12.3765 10.2736 12.6982 10.4641 12.9324 10.7006C13.1847 10.9552 13.3125 11.2491 13.3518 11.6649C13.371 11.8676 13.3475 12.1078 13.2896 12.3031C13.1473 12.7819 12.7635 13.1324 12.2009 13.2974C12.0454 13.343 11.9007 13.3702 11.7576 13.3807C11.539 13.3968 11.2263 13.388 11.038 13.3606C10.5617 13.2912 10.0241 13.014 9.75596 12.6998C9.62434 12.5455 9.45631 12.2916 9.45631 12.247C9.45631 12.2254 9.467 12.2132 9.5093 12.1863C9.6348 12.1065 10.3539 11.6955 10.3679 11.6955C10.3763 11.6955 10.4139 11.7397 10.4513 11.7938C10.5361 11.9163 10.7448 12.1268 10.8508 12.1971C10.9374 12.2545 11.0482 12.3005 11.1797 12.3338C11.2551 12.3525 11.2949 12.3559 11.4593 12.3559C11.6272 12.3558 11.6617 12.353 11.7368 12.3328C11.9355 12.2794 12.0906 12.1687 12.1563 12.0335C12.1851 11.9751 12.1857 11.9678 12.1857 11.8261V11.6793L12.1504 11.6092C12.0649 11.4394 11.8805 11.3229 11.2977 11.0705C11.0301 10.9545 10.7022 10.791 10.5742 10.7097C10.2821 10.524 10.0796 10.3118 9.94677 10.052C9.81461 9.79369 9.79493 9.69754 9.79461 9.30909C9.79429 9.00499 9.79378 9.00873 9.85672 8.81465C9.91384 8.63853 10.0308 8.44179 10.1599 8.30458C10.4175 8.03075 10.7939 7.85475 11.1969 7.81974C11.2484 7.81485 11.3174 7.81296 11.3925 7.81318L11.3926 7.81312ZM7.92504 7.87318H7.92517C8.70127 7.87357 9.14616 7.87626 9.1533 7.88074C9.16674 7.88906 9.16844 7.95661 9.16844 8.38768V8.88499L8.394 8.88781L7.61957 8.89062V11.0894C7.61957 12.2988 7.61711 13.2955 7.61375 13.3043C7.60828 13.3191 7.54869 13.3202 7.04479 13.3202H6.482L6.47618 13.2975C6.47244 13.285 6.46968 12.2883 6.46962 11.0826L6.46943 8.8905L5.69503 8.88774L4.92056 8.88493V8.3935C4.92056 8.00374 4.92325 7.89936 4.93365 7.88899C4.94431 7.87802 5.33954 7.8752 7.04252 7.8735C7.37084 7.87318 7.66632 7.87302 7.92504 7.87318Z"
+        fill="#3B3C45"
+      />
+    </g>
+  </svg>
+);
+
+export const DocumentTsIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/DocumentTsIcon/DocumentTsIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/DocumentTsIcon/index.ts

@@ -0,0 +1 @@
+export { DocumentTsIcon } from '@redocly/theme/icons/DocumentTsIcon/DocumentTsIcon';

package/src/icons/DocumentYamlIcon/DocumentYamlIcon.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g id="iconYaml">
+      <path
+        id="Vector"
+        d="M8.66675 5.99967H12.3334L8.66675 2.33301V5.99967ZM4.00008 1.33301H9.33342L13.3334 5.33301V13.333C13.3334 14.0663 12.7334 14.6663 12.0001 14.6663H4.00008C3.26675 14.6663 2.66675 14.0663 2.66675 13.333V2.66634C2.66675 1.93301 3.26675 1.33301 4.00008 1.33301ZM12.0001 11.9997V10.6663H6.00008V11.9997H12.0001ZM9.33342 9.33301V7.99967H4.00008V9.33301H9.33342Z"
+        fill="#3B3C45"
+      />
+    </g>
+  </svg>
+);
+
+export const DocumentYamlIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/DocumentYamlIcon/DocumentYamlIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/DocumentYamlIcon/index.ts

@@ -0,0 +1 @@
+export { DocumentYamlIcon } from '@redocly/theme/icons/DocumentYamlIcon/DocumentYamlIcon';

package/src/index.ts

@@ -242,6 +242,7 @@ export * from '@redocly/theme/layouts/NotFound';
 export * from '@redocly/theme/layouts/Forbidden';
 export * from '@redocly/theme/layouts/OIDCForbidden';
 export * from '@redocly/theme/layouts/ThreePanelLayout';
+export * from '@redocly/theme/layouts/CodeWalkthroughLayout';
 /* Markdoc */
 export * as markdoc from '@redocly/theme/markdoc/default';
 /* DatePicker */

package/src/layouts/CodeWalkthroughLayout.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export type CodeWalkthroughLayoutProps = React.PropsWithChildren<{
+  className?: string;
+}>;
+
+export function CodeWalkthroughLayout({
+  className,
+  children,
+}: CodeWalkthroughLayoutProps): JSX.Element {
+  return (
+    <LayoutWrapper data-component-name="Layout/CodeWalkthroughLayout" className={className}>
+      <ContentWrapper>{children}</ContentWrapper>
+    </LayoutWrapper>
+  );
+}
+
+const LayoutWrapper = styled.div.attrs(({ className }) => ({
+  className,
+}))`
+  display: flex;
+  flex: 1;
+  width: 100%;
+`;
+
+const ContentWrapper = styled.section`
+  width: 100%;
+  --md-content-font-size: var(--font-size-lg);
+  --md-content-line-height: var(--line-height-lg);
+  --md-table-font-size: var(--md-content-font-size);
+  --md-table-line-height: var(--md-content-line-height);
+  --md-tabs-content-font-size: var(--md-content-font-size);
+  --md-tabs-content-line-height: var(--md-content-line-height);
+
+  article {
+    padding: var(--spacing-xl) 0;
+
+    /* Spacing for elements preceding a code walkthrough */
+    > :not(.code-walkthrough):has(+ .code-walkthrough) {
+      margin-bottom: var(--spacing-xl);
+    }
+
+    /* Spacing for code walkthroughs not at the end */
+    > .code-walkthrough:not(:last-child) {
+      margin-bottom: var(--spacing-xl);
+    }
+
+    /* Layout constraints for direct children except .code-walkthrough */
+    > :not(.code-walkthrough) {
+      max-width: var(--md-content-max-width);
+      padding-left: 0;
+      padding-right: 0;
+      margin-left: auto !important;
+      margin-right: auto !important;
+    }
+
+    /* Adjust padding for edge cases with .code-walkthrough */
+    &:has(.code-walkthrough:first-child) {
+      padding-top: 0;
+    }
+
+    &:has(.code-walkthrough:last-child) {
+      padding-bottom: 0;
+    }
+
+    /* Full-width styling for all .code-walkthroughs */
+    .code-walkthrough {
+      max-width: none;
+      width: 100%;
+    }
+
+    &:first-child > h1:first-child {
+      // disable margin top for h1 on the title heading
+      margin-top: 0;
+    }
+  }
+`;

package/src/markdoc/attributes/code-walkthrough-filesets.ts

@@ -0,0 +1,9 @@
+import type { CustomAttributeTypeInterface, ValidationError } from '@markdoc/markdoc';
+
+export class CodeWalkthroughFilesets implements CustomAttributeTypeInterface {
+  validate(_value: string): ValidationError[] {
+    return [];
+  }
+
+  static resolver = 'codeWalkthroughFilesets';
+}

package/src/markdoc/attributes/code-walkthrough-filters.ts

@@ -0,0 +1,9 @@
+import type { CustomAttributeTypeInterface, ValidationError } from '@markdoc/markdoc';
+
+export class CodeWalkthroughFilters implements CustomAttributeTypeInterface {
+  validate(_value: string): ValidationError[] {
+    return [];
+  }
+
+  static resolver = 'codeWalkthroughFilters';
+}

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

@@ -0,0 +1,76 @@
+import React, { useContext, useRef, useEffect, useState } from 'react';
+import styled, { css } from 'styled-components';
+
+import { CodeWalkthroughStepsContext } from '@redocly/theme/core/contexts';
+import { CodeBlockContainer } from '@redocly/theme/components/CodeBlock/CodeBlockContainer';
+
+export type CodeContainerProps = {
+  highlightedCode: string;
+  toolbar: JSX.Element;
+};
+
+export function CodeContainer({
+  highlightedCode,
+  toolbar,
+}: CodeContainerProps): JSX.Element | null {
+  const { activeStep } = useContext(CodeWalkthroughStepsContext);
+  const [isHovered, setIsHovered] = useState(false);
+  const compRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    // useEffect executed before DOM is updated due to re-render called before "painting" phase.
+    setTimeout(() => {
+      if (compRef.current) {
+        const element = compRef.current.querySelector('span.line.highlighted');
+        if (element) {
+          element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+        }
+      }
+    }, 200);
+  }, [activeStep]);
+
+  return (
+    <CodeContainerWrapper
+      ref={compRef}
+      hideCodeColors={!isHovered}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <CodeBlockContainer dangerouslySetInnerHTML={{ __html: highlightedCode }} />
+      {toolbar}
+    </CodeContainerWrapper>
+  );
+}
+
+const CodeContainerWrapper = styled.div<{ hideCodeColors?: boolean }>`
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-height: 0;
+
+  pre {
+    display: grid;
+    grid-auto-rows: min-content;
+    min-height: 0;
+    overflow: scroll;
+    margin: 0 !important;
+    height: 100%;
+    padding-left: 0 !important;
+
+    span.line::before {
+      color: var(--code-panel-line-numbering-color);
+    }
+    ${({ hideCodeColors }) =>
+      hideCodeColors &&
+      css`
+        .line.greyed-out {
+          color: var(--text-color-helper) !important;
+          * {
+            color: var(--text-color-helper) !important;
+          }
+        }
+      `}
+  }
+`;

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

@@ -0,0 +1,87 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { CodeWalkthroughFilter } from '@redocly/config';
+
+import { Tag } from '@redocly/theme/components/Tag/Tag';
+
+export type CodeFilterProps = {
+  filters: CodeWalkthroughFilter[];
+  getFilterState: (groupId: string) => { value: string; render: boolean } | null;
+  handleFilterSelect: (groupId: string, id: string) => void;
+  filtersElementRef?: React.RefObject<HTMLDivElement>;
+};
+
+export function CodeFilters({
+  filters,
+  getFilterState,
+  handleFilterSelect,
+  filtersElementRef,
+}: CodeFilterProps) {
+  if (filters.length === 0) {
+    return null;
+  }
+
+  return (
+    <FilterWrapper ref={filtersElementRef}>
+      {filters.map(({ label, items, id }) => {
+        return (
+          <Filter key={id}>
+            {label && <FilterName>{label}:</FilterName>}
+            <ButtonsWrapper>
+              {items?.map((item) => (
+                <TagButton
+                  size="large"
+                  borderless
+                  active={getFilterState(id)?.value === item.value}
+                  key={item.value}
+                  onClick={() => handleFilterSelect(id, item.value)}
+                >
+                  {item.value}
+                </TagButton>
+              ))}
+            </ButtonsWrapper>
+          </Filter>
+        );
+      })}
+    </FilterWrapper>
+  );
+}
+
+const Filter = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+`;
+
+const FilterName = styled.div`
+  color: var(--color-text-primary);
+  font-size: var(--font-size-base);
+`;
+
+const FilterWrapper = styled.div`
+  --tag-text-transform: none;
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-sm);
+  flex-wrap: wrap;
+  position: sticky;
+
+  padding-top: calc(var(--spacing-xs) + var(--spacing-xl));
+  padding-right: var(--spacing-xl);
+  padding-left: var(--spacing-xl);
+  padding-bottom: var(--spacing-xs);
+  top: calc(var(--navbar-height));
+  background-color: var(--bg-color);
+  z-index: 1;
+`;
+
+const ButtonsWrapper = styled.div`
+  display: flex;
+`;
+
+const TagButton = styled(Tag)`
+  cursor: pointer;
+  padding: 0px var(--spacing-xs);
+  margin-right: var(--spacing-xs);
+`;

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

@@ -0,0 +1,68 @@
+import React, { useContext } from 'react';
+import styled from 'styled-components';
+
+import type { CodeWalkthroughFile } from '@redocly/config';
+
+import { useCodePanel } from '@redocly/theme/core/hooks';
+import { CodeWalkthroughControlsStateContext } from '@redocly/theme/core/contexts';
+import { CodePanelHeader } from '@redocly/theme/markdoc/components/CodeWalkthrough/CodePanelHeader';
+import { CodePanelPreview } from '@redocly/theme/markdoc/components/CodeWalkthrough/CodePanelPreview';
+import { CodeContainer } from '@redocly/theme/markdoc/components/CodeWalkthrough/CodeContainer';
+import { CodePanelToolbar } from '@redocly/theme/markdoc/components/CodeWalkthrough/CodePanelToolbar';
+
+export type CodePanelProps = {
+  files: CodeWalkthroughFile[];
+  downloadAssociatedFiles: CodeWalkthroughFile[];
+  preview: React.ReactNode[];
+};
+
+export function CodePanel({
+  files,
+  downloadAssociatedFiles,
+  preview,
+}: CodePanelProps): JSX.Element | null {
+  const { activeFile, handleTabSwitch, highlightedCode } = useCodePanel(files);
+  const { handleDownloadCode } = useContext(CodeWalkthroughControlsStateContext);
+
+  return (
+    <CodePanelWrapper>
+      {preview ? (
+        <CodePanelPreview>
+          {preview.map((element, idx) => (
+            <React.Fragment key={idx}>{element}</React.Fragment>
+          ))}
+        </CodePanelPreview>
+      ) : null}
+      <CodePanelHeader
+        files={files}
+        activeTabName={activeFile?.path || ''}
+        handleTabSwitch={handleTabSwitch}
+        onDownloadCode={() => handleDownloadCode([...files, ...downloadAssociatedFiles])}
+      />
+      <CodeContainer
+        key={activeFile?.path || ''}
+        highlightedCode={highlightedCode}
+        toolbar={<CodePanelToolbar file={activeFile} />}
+      />
+    </CodePanelWrapper>
+  );
+}
+
+const CodePanelWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-self: flex-start;
+
+  min-height: 144px;
+  min-width: 0;
+  height: 100%;
+  word-wrap: break-word;
+
+  background-color: var(--code-panel-bg-color);
+  border: 1px solid var(--code-panel-border-color);
+  border-radius: var(--code-panel-border-radius);
+  --code-block-max-height: calc(100vh - var(--navbar-height) - 2 * var(--spacing-xl));
+  height: calc(100vh - var(--navbar-height) - 2 * var(--spacing-xl));
+  position: sticky;
+  top: calc(var(--navbar-height) + var(--spacing-xl));
+`;

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

@@ -0,0 +1,192 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+
+import type { CodeWalkthroughFile } from '@redocly/config';
+
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { getFileIconByExt } from '@redocly/theme/core/utils';
+import { OverflowMenuVerticalIcon } from '@redocly/theme/icons/OverflowMenuVerticalIcon/OverflowMenuVerticalIcon';
+import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
+import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
+import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
+import { DownloadIcon } from '@redocly/theme/icons/DownloadIcon/DownloadIcon';
+import { Button } from '@redocly/theme/components/Button/Button';
+
+export type CodePanelHeaderProps = {
+  files: CodeWalkthroughFile[];
+  handleTabSwitch: (name: string) => void;
+  activeTabName: string;
+  onDownloadCode: () => void;
+};
+
+export function CodePanelHeader({
+  files,
+  handleTabSwitch,
+  activeTabName,
+  onDownloadCode,
+}: CodePanelHeaderProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const tabRefs = useRef<HTMLButtonElement[]>([]);
+  const tabsWrapperRef = useRef<HTMLDivElement>(null);
+  const [hiddenFiles, setHiddenFiles] = useState<CodeWalkthroughFile[]>([]);
+
+  useEffect(() => {
+    const activeTab = tabRefs.current.find((tab) => tab?.dataset.name === activeTabName);
+    if (activeTab) {
+      activeTab.scrollIntoView({ block: 'nearest', inline: 'center' });
+    }
+  }, [activeTabName]);
+
+  useEffect(() => {
+    const calculateHiddenFiles = () => {
+      if (!tabsWrapperRef.current) return;
+      const { left: wrapperLeft, right: wrapperRight } =
+        tabsWrapperRef.current.getBoundingClientRect();
+
+      const hidden = files.filter((_, i) => {
+        const tab = tabRefs.current[i];
+        if (!tab) return false;
+        const { left: tabLeft, right: tabRight } = tab.getBoundingClientRect();
+
+        return tabLeft < wrapperLeft || tabRight > wrapperRight;
+      });
+
+      setHiddenFiles(hidden);
+    };
+
+    calculateHiddenFiles();
+    window.addEventListener('resize', calculateHiddenFiles);
+    return () => window.removeEventListener('resize', calculateHiddenFiles);
+  }, [files]);
+
+  const getFileTypeIcon = useCallback((basename: string) => {
+    const extension = basename.split('.').pop()?.toLowerCase() || '';
+    return getFileIconByExt(extension);
+  }, []);
+
+  return (
+    <CodePanelHeaderWrapper data-component-name="Markdoc/CodeWalkthrough/CodePanelHeader">
+      <TabsWrapper ref={tabsWrapperRef}>
+        <Tabs>
+          {files.map(({ path, basename }, i) => {
+            const FileIcon = getFileTypeIcon(basename);
+            return (
+              <Tab
+                ref={(el: HTMLButtonElement) => (tabRefs.current[i] = el)}
+                data-name={path}
+                active={path === activeTabName}
+                key={i}
+                onClick={() => handleTabSwitch(path)}
+              >
+                <FileIcon />
+                {basename}
+              </Tab>
+            );
+          })}
+        </Tabs>
+        <Gradient />
+      </TabsWrapper>
+
+      <ActionBar>
+        {hiddenFiles.length ? (
+          <Dropdown trigger={<StyledOverflowMenuVerticalIcon size="14px" />} alignment="end">
+            <StyledDropdownMenu>
+              {hiddenFiles.map(({ path, basename }, i) => {
+                const FileIcon = getFileTypeIcon(basename);
+                return (
+                  <DropdownMenuItem
+                    active={path === activeTabName}
+                    key={i}
+                    onAction={() => handleTabSwitch(path)}
+                    prefix={<FileIcon />}
+                    content={basename}
+                  />
+                );
+              })}
+            </StyledDropdownMenu>
+          </Dropdown>
+        ) : null}
+
+        <Button variant="text" icon={<DownloadIcon />} onClick={onDownloadCode} size="small">
+          {translate('codeWalkthrough.download', 'Download')}
+        </Button>
+      </ActionBar>
+    </CodePanelHeaderWrapper>
+  );
+}
+
+const CodePanelHeaderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-sm);
+  max-width: 100%;
+`;
+
+const TabsWrapper = styled.div`
+  display: flex;
+  position: relative;
+  min-width: 0;
+`;
+
+const Gradient = styled.div`
+  position: absolute;
+  right: 0;
+  width: var(--spacing-base);
+  height: var(--code-panel-header-height);
+  background: var(--bg-raised-gradient);
+`;
+
+const Tabs = styled.div`
+  display: flex;
+  overflow-x: auto;
+  padding-right: var(--spacing-base);
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+const ActionBar = styled.div`
+  display: flex;
+`;
+
+const Tab = styled.button<{ active: boolean }>`
+  display: inline-flex;
+  align-items: center;
+  padding: 0 var(--spacing-sm);
+  background-color: transparent;
+  height: var(--code-panel-header-height);
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  gap: var(--spacing-xs);
+  color: var(--text-color-secondary);
+  white-space: nowrap;
+
+  ${({ active }) =>
+    active
+      ? css`
+          color: var(--text-color-primary);
+          background-color: var(--tab-bg-color-filled);
+        `
+      : css`
+          &:hover {
+            color: var(--text-color-primary);
+          }
+        `}
+`;
+
+// code-walk-todo: figure it our why we could not do it differently
+const StyledDropdownMenu = styled(DropdownMenu)`
+  --md-list-left-padding: var(--dropdown-menu-padding);
+`;
+
+const StyledOverflowMenuVerticalIcon = styled(OverflowMenuVerticalIcon)`
+  && {
+    outline: none;
+    box-sizing: content-box;
+    padding: 5px;
+  }
+`;