@redocly/theme 0.47.0 → 0.48.0

package/lib/markdoc/components/CodeWalkthrough/Input.js

@@ -0,0 +1,99 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = Input;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const lodash_debounce_1 = __importDefault(require("lodash.debounce"));
+const contexts_1 = require("../../../core/contexts");
+const DEBOUNCE_TIME = 500;
+function Input(props) {
+    const { id, label, placeholder } = props;
+    const { getInputState, changeInputState } = (0, react_1.useContext)(contexts_1.CodeWalkthroughControlsStateContext);
+    const inputState = getInputState(id);
+    const [value, setValue] = (0, react_1.useState)((inputState === null || inputState === void 0 ? void 0 : inputState.value) || '');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const debouncedSave = (0, react_1.useCallback)((0, lodash_debounce_1.default)((id, value) => {
+        changeInputState(id, value);
+    }, DEBOUNCE_TIME), []);
+    if (!(inputState === null || inputState === void 0 ? void 0 : inputState.render)) {
+        return null;
+    }
+    const handleChange = (event) => {
+        const inputValue = event.target.value;
+        setValue(inputValue);
+        debouncedSave(id, inputValue);
+    };
+    return (react_1.default.createElement(InputWrapper, null,
+        label && react_1.default.createElement(Label, null, label),
+        react_1.default.createElement(StyledInput, { id: id, value: value, onChange: handleChange, "aria-label": label, placeholder: placeholder })));
+}
+const InputWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  margin: var(--md-paragraph-margin);
+`;
+const Label = styled_components_1.default.p `
+  color: var(--text-color-secondary);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  font-family: var(--font-family-base);
+  font-weight: var(--font-weight-medium);
+`;
+const StyledInput = styled_components_1.default.input `
+  border: 1px solid var(--border-color-primary);
+  width: 224px;
+  outline: none;
+  padding: var(--input-padding) var(--spacing-sm);
+  border-radius: var(--input-border-radius);
+  background-color: var(--input-bg-color);
+  color: var(--text-color-secondary);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  line-height: var(--input-line-height);
+
+  &::placeholder {
+    opacity: 1;
+    color: var(--input-content-placeholder-color);
+  }
+
+  &:hover {
+    color: var(--text-color-primary);
+    border: 1px solid var(--border-color-primary);
+  }
+
+  &:focus {
+    color: var(--text-color-primary);
+    border: 1px solid var(--border-color-primary);
+  }
+
+  &:-webkit-autofill {
+    background-color: var(--input-bg-color);
+  }
+`;
+//# sourceMappingURL=Input.js.map

package/lib/markdoc/components/CodeWalkthrough/variables.d.ts

@@ -0,0 +1 @@
+export declare const codeWalkthrough: import("styled-components").FlattenSimpleInterpolation;

package/lib/markdoc/components/CodeWalkthrough/variables.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.codeWalkthrough = void 0;
+const styled_components_1 = require("styled-components");
+exports.codeWalkthrough = (0, styled_components_1.css) `
+--code-step-vertical-line-bg-active: var(--color-blue-6);
+--code-step-vertical-line-bg-hover: var(--color-hover-base);
+
+--code-step-bg-active: var(--layer-color);
+--code-step-bg-hover: var(--color-hover-base);
+--code-step-bg-active-hover: var(--layer-color-hover);
+
+--code-panel-bg-color: var(--layer-color);
+--code-panel-line-numbering-color: var(--text-color-disabled);
+--code-panel-header-height: var(--spacing-lg);
+--code-panel-border-color: var(--border-color-secondary);
+--code-panel-border-radius: var(--border-radius);
+`;
+//# sourceMappingURL=variables.js.map

package/lib/markdoc/components/default.d.ts

@@ -12,3 +12,8 @@ export * from '../../markdoc/components/Cards/Card';
 export * from '../../markdoc/components/Cards/CardIcon';
 export * from '../../markdoc/components/Cards/CardImage';
 export * from '../../markdoc/components/Image/Image';
+export * from '../../markdoc/components/CodeWalkthrough/CodeWalkthrough';
+export * from '../../markdoc/components/CodeWalkthrough/CodeStep';
+export * from '../../markdoc/components/CodeWalkthrough/Input';
+export * from '../../markdoc/components/CodeWalkthrough/CodeToggle';
+export * from '../../markdoc/components/CodeWalkthrough/CodeContainer';

package/lib/markdoc/components/default.js

@@ -28,4 +28,9 @@ __exportStar(require("../../markdoc/components/Cards/Card"), exports);
 __exportStar(require("../../markdoc/components/Cards/CardIcon"), exports);
 __exportStar(require("../../markdoc/components/Cards/CardImage"), exports);
 __exportStar(require("../../markdoc/components/Image/Image"), exports);
+__exportStar(require("../../markdoc/components/CodeWalkthrough/CodeWalkthrough"), exports);
+__exportStar(require("../../markdoc/components/CodeWalkthrough/CodeStep"), exports);
+__exportStar(require("../../markdoc/components/CodeWalkthrough/Input"), exports);
+__exportStar(require("../../markdoc/components/CodeWalkthrough/CodeToggle"), exports);
+__exportStar(require("../../markdoc/components/CodeWalkthrough/CodeContainer"), exports);
 //# sourceMappingURL=default.js.map

package/lib/markdoc/default.js

@@ -48,6 +48,10 @@ const inline_svg_1 = require("../markdoc/tags/inline-svg");
 const cards_1 = require("../markdoc/tags/cards");
 const card_1 = require("../markdoc/tags/card");
 const img_1 = require("../markdoc/tags/img");
+const code_walkthrough_1 = require("../markdoc/tags/code-walkthrough");
+const code_step_1 = require("../markdoc/tags/code-step");
+const input_1 = require("../markdoc/tags/input");
+const code_toggle_1 = require("../markdoc/tags/code-toggle");
 exports.tags = {
     [admonition_1.admonition.tagName]: admonition_1.admonition.schema,
     [debug_1.debug.tagName]: debug_1.debug.schema,
@@ -61,5 +65,9 @@ exports.tags = {
     [cards_1.cards.tagName]: cards_1.cards.schema,
     [card_1.card.tagName]: card_1.card.schema,
     [img_1.img.tagName]: img_1.img.schema,
+    [code_walkthrough_1.codeWalkthrough.tagName]: code_walkthrough_1.codeWalkthrough.schema,
+    [code_step_1.codeStep.tagName]: code_step_1.codeStep.schema,
+    [code_toggle_1.toggle.tagName]: code_toggle_1.toggle.schema,
+    [input_1.input.tagName]: input_1.input.schema,
 };
 //# sourceMappingURL=default.js.map

package/lib/markdoc/tags/code-step.d.ts

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

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.codeStep = void 0;
+exports.codeStep = {
+    tagName: 'step',
+    schema: {
+        attributes: {
+            id: {
+                type: String,
+                required: true,
+            },
+            heading: {
+                type: String,
+            },
+            when: {
+                type: Object,
+            },
+            unless: {
+                type: Object,
+            },
+            stepKey: {
+                type: Number, // internal
+            },
+        },
+        render: 'CodeStep',
+    },
+};
+//# sourceMappingURL=code-step.js.map

package/lib/markdoc/tags/code-toggle.d.ts

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

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

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toggle = void 0;
+const markdoc_1 = __importDefault(require("@markdoc/markdoc"));
+exports.toggle = {
+    tagName: 'toggle',
+    schema: {
+        attributes: {
+            id: {
+                type: String,
+                required: true,
+            },
+            label: {
+                type: String,
+                required: true,
+            },
+            unless: {
+                type: Object,
+                required: false,
+            },
+            when: {
+                type: Object,
+                required: false,
+            },
+        },
+        slots: {
+            description: { required: false, render: true },
+        },
+        transform: (node, config) => {
+            const attributes = node.transformAttributes(config);
+            const children = node.transformChildren(config);
+            return new markdoc_1.default.Tag('CodeToggle', attributes, children);
+        },
+        render: 'CodeToggle',
+    },
+};
+//# sourceMappingURL=code-toggle.js.map

package/lib/markdoc/tags/code-walkthrough.d.ts

@@ -0,0 +1,8 @@
+import { Node, RenderableTreeNode } from '@markdoc/markdoc';
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+import type { CodeWalkthroughConditions, CodeWalkthroughFilter, TogglesMarkdocAttr, InputsMarkdocAttr } from '@redocly/config';
+export declare const codeWalkthrough: MarkdocSchemaWrapper;
+export declare function collectStepsFromChildren(children: RenderableTreeNode[], idx?: number): RenderableTreeNode[];
+export declare function collectTogglesFromChildren(children: Node[], toggles?: TogglesMarkdocAttr): TogglesMarkdocAttr;
+export declare function collectInputsFromChildren(children: RenderableTreeNode[], inputs?: InputsMarkdocAttr): InputsMarkdocAttr;
+export declare function validateCodeWalkthroughCondition(conditions: CodeWalkthroughConditions, filters: Record<string, CodeWalkthroughFilter>, allToggles: string[]): string[];

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.48.0",
   "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,14 +77,16 @@
   },
   "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",
     "i18next": "22.4.15",
     "nprogress": "0.2.0",
-    "@redocly/config": "0.19.4"
+    "@redocly/config": "0.20.0"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",