@redocly/theme 0.47.0 → 0.47.1

package/lib/markdoc/tags/code-walkthrough.js

@@ -0,0 +1,242 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.codeWalkthrough = void 0;
+exports.collectStepsFromChildren = collectStepsFromChildren;
+exports.collectTogglesFromChildren = collectTogglesFromChildren;
+exports.collectInputsFromChildren = collectInputsFromChildren;
+exports.validateCodeWalkthroughCondition = validateCodeWalkthroughCondition;
+const markdoc_1 = __importDefault(require("@markdoc/markdoc"));
+const code_walkthrough_filesets_1 = require("../../markdoc/attributes/code-walkthrough-filesets");
+const code_walkthrough_filters_1 = require("../../markdoc/attributes/code-walkthrough-filters");
+const utils_1 = require("../../core/utils");
+exports.codeWalkthrough = {
+    tagName: 'code-walkthrough',
+    schema: {
+        attributes: {
+            filesets: {
+                type: code_walkthrough_filesets_1.CodeWalkthroughFilesets,
+                render: false,
+                required: true,
+            },
+            resolvedFilesets: {
+                type: Array,
+                render: false,
+                required: false,
+            },
+            filters: {
+                type: code_walkthrough_filters_1.CodeWalkthroughFilters,
+                render: false,
+                required: false,
+            },
+            inputs: {
+                type: Object,
+                render: false,
+                required: false,
+            },
+            toggles: {
+                type: Array,
+                render: false,
+                required: false,
+            },
+        },
+        slots: {
+            preview: { required: false, render: true },
+        },
+        transform: (node, config) => {
+            const attributes = node.transformAttributes(config);
+            const children = node.transformChildren(config);
+            const steps = collectStepsFromChildren(children);
+            const inputs = collectInputsFromChildren(children);
+            const toggles = collectTogglesFromChildren(node.children);
+            return new markdoc_1.default.Tag('CodeWalkthrough', Object.assign(Object.assign({}, attributes), { filters: node.attributes.filters || {}, filesets: node.attributes.resolvedFilesets || [], steps: steps.map((step) => {
+                    return Object.assign({}, ((step === null || step === void 0 ? void 0 : step.attributes) || {}));
+                }), inputs,
+                toggles }), children);
+        },
+        validate(node) {
+            const errors = [];
+            // code-walk-todo: validate when/unless for steps, toggles, inputs, and chunks
+            const toggleIds = Object.keys(collectTogglesFromChildren(node.children));
+            if ((0, utils_1.isObject)(node.attributes.filters)) {
+                Object.entries(node.attributes.filters).forEach(([id, filter]) => {
+                    var _a;
+                    if (!(0, utils_1.isObject)(filter)) {
+                        errors.push({
+                            id: 'filter-elements-type-invalid',
+                            level: 'error',
+                            message: 'The "filters" attribute elements must be of type object.',
+                        });
+                    }
+                    else if (!((_a = filter.items) === null || _a === void 0 ? void 0 : _a.length)) {
+                        errors.push({
+                            id: 'filter-required',
+                            level: 'error',
+                            message: `The "filters" items attribute for the filter ${id} should have at least one item.`,
+                        });
+                    }
+                });
+            }
+            else if (node.attributes.filters) {
+                errors.push({
+                    id: 'filter-type-invalid',
+                    level: 'error',
+                    message: 'The "filters" attribute must be of type object.',
+                });
+            }
+            if (Array.isArray(node.attributes.filesets)) {
+                node.attributes.filesets.forEach((fileset, idx) => {
+                    if (fileset.when) {
+                        const whenErrors = validateCodeWalkthroughCondition(fileset.when, node.attributes.filters || {}, toggleIds);
+                        if (whenErrors.length > 0) {
+                            errors.push({
+                                id: 'fileset-when-invalid',
+                                level: 'error',
+                                message: `Invalid condition at 'filesets.${idx}.when':\n${whenErrors.join('\n')}`,
+                            });
+                        }
+                    }
+                    if (fileset.unless) {
+                        const unlessErrors = validateCodeWalkthroughCondition(fileset.unless, node.attributes.filters || {}, toggleIds);
+                        if (unlessErrors.length > 0) {
+                            errors.push({
+                                id: 'fileset-when-invalid',
+                                level: 'error',
+                                message: `Invalid condition at 'filesets.${idx}.unless':\n${unlessErrors.join('\n')}`,
+                            });
+                        }
+                    }
+                });
+                if (!node.attributes.filesets.length) {
+                    errors.push({
+                        id: 'filesets-required',
+                        level: 'error',
+                        message: 'The "filesets" attribute should have at least one item.',
+                    });
+                }
+            }
+            else {
+                errors.push({
+                    id: 'filesets-type-invalid',
+                    level: 'error',
+                    message: 'The "filesets" attribute must be of type array.',
+                });
+            }
+            node.children.forEach((child) => {
+                if (child.tag === 'step') {
+                    const isValidFilter = validateStepFilters(node.attributes.filters || {}, child.attributes);
+                    if (!isValidFilter) {
+                        errors.push({
+                            id: 'step-filter-invalid',
+                            level: 'error',
+                            message: 'The "step" tag contains invalid filter attributes. Ensure "when" and "unless" conditions reference valid filters.',
+                        });
+                    }
+                }
+            });
+            return errors;
+        },
+        render: 'CodeWalkthrough',
+    },
+};
+function collectStepsFromChildren(children, idx = 0) {
+    return children.flatMap((child) => {
+        if (child instanceof markdoc_1.default.Tag && child.name === 'CodeStep') {
+            child.attributes.stepKey = idx++;
+            return [child];
+        }
+        if (child instanceof markdoc_1.default.Tag) {
+            return collectStepsFromChildren(child.children, idx);
+        }
+        return [];
+    });
+}
+function collectTogglesFromChildren(children, toggles = {}) {
+    for (const child of children) {
+        if (child.tag === 'toggle') {
+            const id = child.attributes.id;
+            if (id) {
+                toggles[id] = {
+                    when: child.attributes.when,
+                    unless: child.attributes.unless,
+                };
+            }
+        }
+        collectTogglesFromChildren(child.children, toggles);
+    }
+    return toggles;
+}
+function collectInputsFromChildren(children, inputs = {}) {
+    for (const child of children) {
+        if (child instanceof markdoc_1.default.Tag && child.name === 'Input') {
+            const id = child.attributes.id;
+            if (id) {
+                inputs[id] = {
+                    value: child.attributes.value || '',
+                    when: child.attributes.when,
+                    unless: child.attributes.unless,
+                };
+            }
+            continue;
+        }
+        if (child instanceof markdoc_1.default.Tag) {
+            collectInputsFromChildren(child.children, inputs);
+        }
+    }
+    return inputs;
+}
+function validateCodeWalkthroughCondition(conditions, filters, allToggles) {
+    var _a;
+    const errors = [];
+    for (const [filterId, filterValue] of Object.entries(conditions)) {
+        if (!filters[filterId] && !allToggles.includes(filterId)) {
+            errors.push('Unknown filter: ' + filterId);
+        }
+        else if (filterValue) {
+            const invalidFilterItems = getInvalidFilterValues(filterValue, ((_a = filters[filterId]) === null || _a === void 0 ? void 0 : _a.items) || []);
+            if (invalidFilterItems.length > 0) {
+                errors.push(`Filter item(s) are not defined on the filter '${filterId}': ${invalidFilterItems.join(', ')}`);
+            }
+        }
+    }
+    return errors;
+}
+function getInvalidFilterValues(filterConditionValue, definedValues) {
+    const togglesArray = Array.isArray(filterConditionValue)
+        ? filterConditionValue
+        : [filterConditionValue];
+    const items = definedValues.map((item) => item.value);
+    return togglesArray.filter((toggle) => typeof toggle !== 'boolean' && !items.includes(toggle));
+}
+function validateStepFilters(filters, obj) {
+    function isValidFilter(filterKey, filterValue) {
+        if (!Object.prototype.hasOwnProperty.call(filters, filterKey)) {
+            return true;
+        }
+        const validItems = filters[filterKey].items.map((item) => item.value);
+        if (Array.isArray(filterValue)) {
+            return filterValue.every((value) => validItems.includes(value));
+        }
+        else {
+            return validItems.includes(filterValue);
+        }
+    }
+    if (obj.when) {
+        for (const [key, value] of Object.entries(obj.when)) {
+            if (!isValidFilter(key, value)) {
+                return false;
+            }
+        }
+    }
+    if (obj.unless) {
+        for (const [key, value] of Object.entries(obj.unless)) {
+            if (!isValidFilter(key, value)) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+//# sourceMappingURL=code-walkthrough.js.map

package/lib/markdoc/tags/input.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const input: MarkdocSchemaWrapper;

package/lib/markdoc/tags/input.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.input = void 0;
+exports.input = {
+    tagName: 'input',
+    schema: {
+        attributes: {
+            id: {
+                type: String,
+                required: true,
+            },
+            label: {
+                type: String,
+                required: false,
+            },
+            placeholder: {
+                type: String,
+                required: false,
+            },
+            value: {
+                type: String,
+                required: false,
+            },
+            unless: {
+                type: Object,
+                required: false,
+            },
+            when: {
+                type: Object,
+                required: false,
+            },
+        },
+        selfClosing: true,
+        render: 'Input',
+    },
+};
+//# sourceMappingURL=input.js.map

package/lib/plugin.d.ts

@@ -1,3 +1,4 @@
-export default function plugin(): {
+declare function _exports(): {
     id: string;
 };
+export = _exports;

package/lib/plugin.js

@@ -1,7 +1,5 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = plugin;
-function plugin() {
+module.exports = function plugin() {
     return { id: 'default-theme' };
-}
+};
 //# sourceMappingURL=plugin.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.47.0",
+  "version": "0.47.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -26,6 +26,7 @@
   },
   "peerDependencies": {
     "@markdoc/markdoc": "0.4.0",
+    "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
@@ -35,16 +36,19 @@
   },
   "devDependencies": {
     "@markdoc/markdoc": "0.4.0",
+    "@shikijs/types": "1.24.2",
     "@testing-library/jest-dom": "6.1.5",
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.5.1",
+    "@types/file-saver": "2.0.7",
     "@types/highlight-words-core": "1.2.3",
     "@types/jest": "29.5.11",
     "@types/jest-when": "3.5.5",
+    "@types/lodash.debounce": "4.0.9",
     "@types/lodash.throttle": "4.1.9",
     "@types/node": "18.19.3",
     "@types/react": "18.3.9",
-    "@types/react-dom": "18.2.25",
+    "@types/react-dom": "18.3.5",
     "@types/styled-components": "5.1.34",
     "@types/styled-system": "5.1.22",
     "@types/nprogress": "0.2.3",
@@ -54,6 +58,7 @@
     "jest-styled-components": "7.2.0",
     "jest-when": "3.6.0",
     "json-schema-to-ts": "2.7.2",
+    "lodash.debounce": "4.0.8",
     "lodash.throttle": "4.1.1",
     "npm-run-all2": "5.0.2",
     "react-refresh": "0.14.2",
@@ -72,8 +77,10 @@
   },
   "dependencies": {
     "copy-to-clipboard": "3.3.3",
+    "file-saver": "2.0.5",
     "highlight-words-core": "1.2.2",
     "hotkeys-js": "3.10.1",
+    "jszip": "3.10.1",
     "react-calendar": "4.2.1",
     "react-date-picker": "10.0.3",
     "timeago.js": "4.0.2",

package/src/components/Buttons/CopyButton.tsx

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 
 import type { TooltipProps } from '@redocly/theme/components/Tooltip/Tooltip';
-import type { ControlItemType } from '@redocly/theme/components/CodeBlock/CodeBlockControls';
+import type { ButtonProps } from '@redocly/theme/components/Button/Button';
 
 import { ClipboardService } from '@redocly/theme/core/utils';
 import { useThemeHooks, useControl } from '@redocly/theme/core/hooks';
@@ -11,7 +11,7 @@ import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
 
 export type CopyButtonProps = {
   data: unknown;
-  type?: ControlItemType;
+  type?: 'icon' | 'text' | 'compound';
   toasterPlacement?: TooltipProps['placement'];
   toasterText?: string;
   toasterDuration?: number;
@@ -19,7 +19,14 @@ export type CopyButtonProps = {
   onCopyClick?: (e: React.MouseEvent<HTMLElement>) => void;
   dataTestId?: string;
   className?: string;
-  variant?: string;
+
+  // Generic button props
+  variant?: ButtonProps['variant'];
+  size?: ButtonProps['size'];
+  disabled?: ButtonProps['disabled'];
+  fullWidth?: ButtonProps['fullWidth'];
+  tone?: ButtonProps['tone'];
+  extraClass?: ButtonProps['extraClass'];
 };
 
 function CopyButtonComponent({
@@ -33,6 +40,11 @@ function CopyButtonComponent({
   dataTestId = 'copy-button',
   className,
   variant = 'text',
+  size = 'small',
+  disabled,
+  fullWidth,
+  tone,
+  extraClass,
 }: CopyButtonProps): JSX.Element {
   const { useTranslate } = useThemeHooks();
   const tooltip = useControl();
@@ -59,16 +71,22 @@ function CopyButtonComponent({
       tip={translate('codeSnippet.copy.buttonText', toasterText || 'Copied!')}
       isOpen={tooltip.isOpened}
       placement={toasterPlacement}
+      width="fit-content"
     >
       <Button
         data-component-name="Buttons/CopyButton"
         onClick={(e) => copy(e, toasterDuration)}
         data-testid={dataTestId}
-        icon={type === 'icon' ? <CopyIcon /> : undefined}
-        size="small"
+        icon={type === 'icon' || type === 'compound' ? <CopyIcon /> : undefined}
+        size={size}
         variant={variant}
+        disabled={disabled}
+        fullWidth={fullWidth}
+        tone={tone}
+        extraClass={extraClass}
       >
-        {type !== 'icon' && translate('codeSnippet.copy.toasterText', buttonText || 'Copy')}
+        {(type === 'text' || type === 'compound') &&
+          translate('codeSnippet.copy.toasterText', buttonText || 'Copy')}
       </Button>
     </Tooltip>
   );

package/src/components/StatusCode/StatusCode.ts

@@ -17,16 +17,17 @@ export const StatusCode = styled.button.attrs({ 'data-component-name': 'StatusCo
     width: var(--status-code-width);
     border: var(--status-code-border);
     background-color: ${({ status }) => {
-      if (Math.floor(Number(status) / 100) === 2) {
-        return 'var(--status-code-200-bg-color)';
-      } else if (Math.floor(Number(status) / 100) === 4) {
-        return 'var(--status-code-400-bg-color)';
-      } else if (Math.floor(Number(status) / 100) === 5) {
-        return 'var(--status-code-500-bg-color)';
-      } else if (Math.floor(Number(status) / 100) === 3) {
-        return 'var(--status-code-300-bg-color)';
-      } else {
-        return 'var(--status-code-100-bg-color)';
+      switch (true) {
+        case status.startsWith('2'):
+          return 'var(--status-code-200-bg-color)';
+        case status.startsWith('3'):
+          return 'var(--status-code-300-bg-color)';
+        case status.startsWith('4'):
+          return 'var(--status-code-400-bg-color)';
+        case status.startsWith('5'):
+          return 'var(--status-code-500-bg-color)';
+        default:
+          return 'var(--status-code-100-bg-color)';
       }
     }}
 `;

package/src/core/constants/code-walkthrough.ts

@@ -0,0 +1 @@
+export const ACTIVE_STEP_QUERY_PARAM = '__step';

package/src/core/constants/index.ts

@@ -1,2 +1,3 @@
 export * from '@redocly/theme/core/constants/common';
 export * from '@redocly/theme/core/constants/environments';
+export * from '@redocly/theme/core/constants/code-walkthrough';

package/src/core/contexts/CodeWalkthrough/CodeWalkthroughControlsContext.tsx

@@ -0,0 +1,21 @@
+import { createContext } from 'react';
+
+import type { WalkthroughControlsState } from '@redocly/theme/core/hooks';
+
+export const CodeWalkthroughControlsStateContext = createContext<WalkthroughControlsState>({
+  activeFilters: [],
+
+  getToggleState: () => null,
+  changeToggleState: () => {},
+
+  getInputState: () => null,
+  changeInputState: () => {},
+
+  getFilterState: () => null,
+  changeFilterState: () => {},
+
+  getFileText: () => '',
+  areConditionsMet: () => false,
+  handleDownloadCode: () => Promise.resolve(),
+  populateInputsWithValue: (node) => node,
+});

package/src/core/contexts/CodeWalkthrough/CodeWalkthroughStepsContext.tsx

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+
+import type { WalkthroughStepsState } from '@redocly/theme/core/hooks';
+
+export const CodeWalkthroughStepsContext = createContext<WalkthroughStepsState>({
+  activeStep: null,
+  setActiveStep: () => {},
+  register: () => {},
+  unregister: () => {},
+});

package/src/core/contexts/index.ts

@@ -1 +1,3 @@
 export * from '@redocly/theme/core/contexts/ThemeDataContext';
+export * from '@redocly/theme/core/contexts/CodeWalkthrough/CodeWalkthroughControlsContext';
+export * from '@redocly/theme/core/contexts/CodeWalkthrough/CodeWalkthroughStepsContext';

package/src/core/hooks/code-walkthrough/__mocks__/MockIntersectionObserver.ts

@@ -0,0 +1,22 @@
+export class MockIntersectionObserver {
+  public readonly root: Element | Document | null;
+  public readonly rootMargin: string;
+  public readonly thresholds: ReadonlyArray<number>;
+  observe: (target: HTMLElement) => void;
+  unobserve: (target: HTMLElement) => void;
+  disconnect: () => void;
+
+  // @ts-ignore
+  constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit) {
+    this.root = null;
+    this.rootMargin = '0px';
+    this.thresholds = [1];
+    this.observe = jest.fn;
+    this.unobserve = jest.fn;
+    this.disconnect = jest.fn;
+  }
+
+  takeRecords(): any[] {
+    return [];
+  }
+}