@redocly/theme 0.47.0 → 0.47.1

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;
+  }
+`;

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

@@ -0,0 +1,53 @@
+import React, { PropsWithChildren, useState } from 'react';
+import styled from 'styled-components';
+
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { ChevronUpIcon } from '@redocly/theme/icons/ChevronUpIcon/ChevronUpIcon';
+import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
+
+export function CodePanelPreview({ children }: PropsWithChildren): JSX.Element {
+  const [isOpen, setIsOpen] = useState(false);
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
+  return (
+    <CodePanelPreviewWrapper>
+      <PreviewDropdown onClick={() => setIsOpen(!isOpen)}>
+        {translate('codeWalkthrough.preview', 'Preview')}
+        {isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
+      </PreviewDropdown>
+      <PreviewContentWrapper isOpen={isOpen}>{children}</PreviewContentWrapper>
+    </CodePanelPreviewWrapper>
+  );
+}
+
+const CodePanelPreviewWrapper = styled.div`
+  width: 100%;
+  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-sm);
+  border-bottom: 1px solid var(--border-color-secondary);
+`;
+
+const PreviewDropdown = styled.div`
+  display: flex;
+  align-items: center;
+
+  gap: (--spacing-xxs);
+
+  user-select: none;
+
+  font-size: var(--font-size-base);
+  cursor: pointer;
+`;
+
+const PreviewContentWrapper = styled.div<{ isOpen: boolean }>`
+  display: ${({ isOpen }) => (isOpen ? 'grid' : 'none')};
+  place-items: center;
+
+  margin: auto 0;
+
+  max-height: 50vh;
+  width: 100%;
+  max-width: 100%;
+
+  overflow: auto;
+`;

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

@@ -0,0 +1,31 @@
+import React, { useContext } from 'react';
+import styled from 'styled-components';
+
+import type { CodeWalkthroughFile } from '@redocly/config';
+
+import { CodeWalkthroughControlsStateContext } from '@redocly/theme/core/contexts';
+import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';
+
+export type CodeToolbarProps = {
+  file: CodeWalkthroughFile;
+};
+
+export function CodePanelToolbar({ file }: CodeToolbarProps): JSX.Element {
+  const { getFileText } = useContext(CodeWalkthroughControlsStateContext);
+
+  const fileContent = getFileText(file);
+
+  return (
+    <CodeToolbarWrapper>
+      <CopyButton data={fileContent} type="compound" variant="secondary" size="medium" />
+    </CodeToolbarWrapper>
+  );
+}
+
+const CodeToolbarWrapper = styled.div`
+  display: flex;
+  position: absolute;
+  bottom: var(--spacing-sm);
+  right: var(--spacing-sm);
+  gap: var(--spacing-xs);
+`;