@redocly/theme 0.47.0 → 0.47.1

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export type CodeToggleProps = React.PropsWithChildren<{
+    id: string;
+    label: string;
+    description?: React.ReactNode[];
+}>;
+export declare function CodeToggle(props: CodeToggleProps): React.JSX.Element | null;
+export declare const ToggleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ToggleSubtitle: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,69 @@
+"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.ToggleSubtitle = exports.ToggleWrapper = void 0;
+exports.CodeToggle = CodeToggle;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const contexts_1 = require("../../../core/contexts");
+const CodeStep_1 = require("../../../markdoc/components/CodeWalkthrough/CodeStep");
+const Switch_1 = require("../../../components/Switch/Switch");
+function CodeToggle(props) {
+    const { id, label, description, children } = props;
+    const { getToggleState, changeToggleState } = (0, react_1.useContext)(contexts_1.CodeWalkthroughControlsStateContext);
+    const toggleState = getToggleState(id);
+    if (!(toggleState && toggleState.render)) {
+        return null;
+    }
+    const checked = toggleState.value;
+    return (react_1.default.createElement(exports.ToggleWrapper, null,
+        react_1.default.createElement(ToggleContentWrapper, null,
+            react_1.default.createElement(exports.ToggleSubtitle, null,
+                react_1.default.createElement(Switch_1.Switch, { value: checked, onChange: (newValue) => changeToggleState(id, newValue) }),
+                react_1.default.createElement("div", null, label)),
+            description ? (react_1.default.createElement("div", null, description.map((paragraph, idx) => (react_1.default.createElement(react_1.default.Fragment, { key: idx }, paragraph))))) : null),
+        checked ? children : null));
+}
+exports.ToggleWrapper = styled_components_1.default.div `
+  ${CodeStep_1.StepWrapper} {
+    margin-left: 0;
+  }
+`;
+exports.ToggleSubtitle = styled_components_1.default.div `
+  display: flex;
+  gap: var(--spacing-sm);
+  align-items: center;
+  font-weight: var(--font-weight-bold);
+`;
+const ToggleContentWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs) 0;
+`;
+//# sourceMappingURL=CodeToggle.js.map

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

@@ -0,0 +1,4 @@
+import React, { type PropsWithChildren } from 'react';
+import type { CodeWalkthroughAttr } from '@redocly/config';
+export type CodeWalkthroughProps = PropsWithChildren<CodeWalkthroughAttr>;
+export declare function CodeWalkthrough({ children, steps, preview, ...attributes }: CodeWalkthroughProps): React.JSX.Element;

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

@@ -0,0 +1,121 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeWalkthrough = CodeWalkthrough;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const contexts_1 = require("../../../core/contexts");
+const CodePanel_1 = require("../../../markdoc/components/CodeWalkthrough/CodePanel");
+const hooks_1 = require("../../../core/hooks");
+const CodeFilters_1 = require("../../../markdoc/components/CodeWalkthrough/CodeFilters");
+const CodeStep_1 = require("../../../markdoc/components/CodeWalkthrough/CodeStep");
+function CodeWalkthrough(_a) {
+    var { children, steps, preview } = _a, attributes = __rest(_a, ["children", "steps", "preview"]);
+    // Steps are being modified causing the observer to be recreated in the useCodeWalkthrough hook
+    // This is a workaround to prevent the observer from being recreated
+    const [initialSteps] = (0, react_1.useState)([...steps]);
+    const { controlsState, stepsState, files, downloadAssociatedFiles } = (0, hooks_1.useCodeWalkthrough)(initialSteps, attributes);
+    const { activeFilters, getFilterState, changeFilterState } = controlsState;
+    const { filtersElementRef } = stepsState;
+    return (react_1.default.createElement(contexts_1.CodeWalkthroughStepsContext.Provider, { value: stepsState },
+        react_1.default.createElement(contexts_1.CodeWalkthroughControlsStateContext.Provider, { value: controlsState },
+            react_1.default.createElement(CodeWalkthroughWrapper, { className: "code-walkthrough" },
+                react_1.default.createElement(DocsPanel, null,
+                    react_1.default.createElement(CodeFilters_1.CodeFilters, { filters: activeFilters, getFilterState: getFilterState, handleFilterSelect: changeFilterState, filtersElementRef: filtersElementRef }),
+                    react_1.default.createElement(ContentWrapper, null, children)),
+                react_1.default.createElement(CodePanel_1.CodePanel, { files: files, downloadAssociatedFiles: downloadAssociatedFiles, preview: preview })))));
+}
+const CodeWalkthroughWrapper = styled_components_1.default.div `
+  display: grid;
+  grid-template-columns: 4fr 6fr;
+
+  padding-right: var(--spacing-xl);
+
+  border-top: 1px solid var(--border-color-secondary);
+  border-bottom: 1px solid var(--border-color-secondary);
+
+  &:first-child {
+    border-top: none;
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+const DocsPanel = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+
+  min-height: 0;
+  min-height: calc(100vh - var(--navbar-height));
+
+  padding-right: var(--spacing-xs);
+  padding-bottom: calc(var(--spacing-xs) + var(--spacing-xl));
+  gap: var(--spacing-xl);
+`;
+const ContentWrapper = styled_components_1.default.div `
+  flex-grow: 1;
+
+  min-height: 0;
+  max-width: var(--md-content-max-width);
+
+  & > *:not(${CodeStep_1.StepWrapper}) {
+    padding-left: var(--spacing-xl);
+  }
+  overflow-y: scroll;
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+
+  &:first-child {
+    padding-top: var(--spacing-sm);
+  }
+
+  &:not(:first-child) {
+    & > *:first-child {
+      margin-top: 0;
+    }
+  }
+`;
+//# sourceMappingURL=CodeWalkthrough.js.map

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export type InputProps = {
+    id: string;
+    label?: string;
+    placeholder?: string;
+    value?: string;
+};
+export declare function Input(props: InputProps): React.JSX.Element | null;

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[];