@stoplight/elements-core 7.3.3 → 7.3.7

package/index.mjs

@@ -8,7 +8,7 @@ import { NodeType, HttpParamStyles } from '@stoplight/types';
 import { parse as parse$1 } from '@stoplight/yaml';
 import { isArray as isArray$1, Flex, Box, Popover, Button, Panel, CopyButton, Menu, Text, Input, Icon, Select, Image, Link, useThemeIsDark, Tooltip, VStack, InvertTheme, Badge, Tabs, TabList, Tab, TabPanels, TabPanel, Heading as Heading$1, HStack, useClipboard, Provider as Provider$1 } from '@stoplight/mosaic';
 import { withErrorBoundary } from '@stoplight/react-error-boundary';
-import { MarkdownViewer as MarkdownViewer$1, MarkdownViewerProvider } from '@stoplight/markdown-viewer';
+import { MarkdownViewer as MarkdownViewer$1, DefaultSMDComponents, MarkdownViewerProvider } from '@stoplight/markdown-viewer';
 export { DefaultSMDComponents } from '@stoplight/markdown-viewer';
 import { faStream, faCrosshairs, faCloud, faBookOpen, faCube, faDatabase, faQuestionCircle, faExclamationCircle, faExclamationTriangle, faEye, faLock, faBolt, faCopy, faCheck } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -944,12 +944,16 @@ const booleanOptions = [
     { label: 'False', value: 'false' },
     { label: 'True', value: 'true' },
 ];
+function enumOptions(enumValues, required) {
+    const options = map(enumValues, v => ({ value: Number.isNaN(Number(v)) ? String(v) : Number(v) }));
+    return required ? options : [{ label: 'Not Set', value: '' }, ...options];
+}
 function parameterOptions(parameter) {
     var _a, _b;
     return ((_a = parameter.schema) === null || _a === void 0 ? void 0 : _a.type) === 'boolean'
         ? booleanOptions
         : ((_b = parameter.schema) === null || _b === void 0 ? void 0 : _b.enum) !== undefined
-            ? map(parameter.schema.enum, v => ({ value: Number.isNaN(Number(v)) ? String(v) : Number(v) }))
+            ? enumOptions(parameter.schema.enum, parameter.required)
             : null;
 }
 const selectExampleOption = { value: '', label: 'Pick an example' };
@@ -997,20 +1001,14 @@ const getValueForParameter = (parameter) => {
     return '';
 };
 const getInitialValueForParameter = (parameter) => {
-    var _a;
     const isRequired = !!parameter.required;
-    const isEnum = !!((_a = parameter.schema) === null || _a === void 0 ? void 0 : _a.enum);
-    if (!isEnum && !isRequired)
+    if (!isRequired)
         return '';
     return getValueForParameter(parameter);
 };
 const initialParameterValues = pipe(keyBy((param) => param.name), mapValues(getInitialValueForParameter));
-function mapSchemaPropertiesToParameters(properties) {
-    return Object.entries(properties).map(([name, schema]) => ({
-        name,
-        schema: typeof schema !== 'boolean' ? schema : undefined,
-        examples: typeof schema !== 'boolean' && schema.examples ? [{ key: 'example', value: schema.examples }] : undefined,
-    }));
+function mapSchemaPropertiesToParameters(properties, required) {
+    return Object.entries(properties).map(([name, schema]) => (Object.assign({ name, schema: typeof schema !== 'boolean' ? schema : undefined, examples: typeof schema !== 'boolean' && schema.examples ? [{ key: 'example', value: schema.examples }] : undefined }, ((required === null || required === void 0 ? void 0 : required.includes(name)) && { required: true }))));
 }
 
 const ParameterEditor = ({ parameter, value, onChange, validate }) => {
@@ -1032,6 +1030,7 @@ const ParameterEditor = ({ parameter, value, onChange, validate }) => {
 const FormDataBody = ({ specification, values, onChangeValues }) => {
     const schema = specification.schema;
     const parameters = schema === null || schema === void 0 ? void 0 : schema.properties;
+    const required = schema === null || schema === void 0 ? void 0 : schema.required;
     React.useEffect(() => {
         if (parameters === undefined) {
             console.warn(`Invalid schema in form data spec: ${safeStringify(schema)}`);
@@ -1042,7 +1041,7 @@ const FormDataBody = ({ specification, values, onChangeValues }) => {
     }
     return (React.createElement(Panel, { defaultIsOpen: true },
         React.createElement(Panel.Titlebar, null, "Body"),
-        React.createElement(Panel.Content, { className: "sl-overflow-y-auto ParameterGrid OperationParametersContent" }, mapSchemaPropertiesToParameters(parameters).map(parameter => {
+        React.createElement(Panel.Content, { className: "sl-overflow-y-auto ParameterGrid OperationParametersContent" }, mapSchemaPropertiesToParameters(parameters, required).map(parameter => {
             const supportsFileUpload = parameterSupportsFileUpload(parameter);
             const value = values[parameter.name];
             if (supportsFileUpload) {
@@ -1114,12 +1113,13 @@ const requestBodyCreators = {
 const useBodyParameterState = (mediaTypeContent) => {
     const isFormDataBody = mediaTypeContent && isFormDataContent(mediaTypeContent);
     const initialState = React.useMemo(() => {
-        var _a, _b;
+        var _a, _b, _c;
         if (!isFormDataBody) {
             return {};
         }
         const properties = (_b = (_a = mediaTypeContent === null || mediaTypeContent === void 0 ? void 0 : mediaTypeContent.schema) === null || _a === void 0 ? void 0 : _a.properties) !== null && _b !== void 0 ? _b : {};
-        const parameters = mapSchemaPropertiesToParameters(properties);
+        const required = (_c = mediaTypeContent === null || mediaTypeContent === void 0 ? void 0 : mediaTypeContent.schema) === null || _c === void 0 ? void 0 : _c.required;
+        const parameters = mapSchemaPropertiesToParameters(properties, required);
         return initialParameterValues(parameters);
     }, [isFormDataBody, mediaTypeContent]);
     const [bodyParameterValues, setBodyParameterValues] = React.useState(initialState);
@@ -1187,6 +1187,7 @@ const generateExampleFromMediaTypeContent = (mediaTypeContent, document, chosenE
     }
     catch (e) {
         console.warn(e);
+        return `Example cannot be created for this schema\n${e}`;
     }
     return '';
 };
@@ -1216,15 +1217,26 @@ const generateExamplesFromJsonSchema = (schema) => {
     if (examples.length) {
         return examples;
     }
-    const generated = Sampler.sample(schema);
-    return generated !== null
-        ? [
-            {
-                label: 'default',
-                data: (_b = safeStringify(generated, undefined, 2)) !== null && _b !== void 0 ? _b : '',
-            },
-        ]
-        : [{ label: 'default', data: '' }];
+    try {
+        const generated = Sampler.sample(schema, {
+            maxSampleDepth: 4,
+        });
+        return generated !== null
+            ? [
+                {
+                    label: 'default',
+                    data: (_b = safeStringify(generated, undefined, 2)) !== null && _b !== void 0 ? _b : '',
+                },
+            ]
+            : [{ label: 'default', data: '' }];
+    }
+    catch (e) {
+        console.error(e);
+        return [{ label: '', data: `Example cannot be created for this schema\n${e}` }];
+    }
+};
+const exceedsSize = (example, size = 500) => {
+    return example.split(/\r\n|\r|\n/).length > size;
 };
 
 const useTextRequestBodyState = (mediaTypeContent) => {
@@ -1261,7 +1273,9 @@ function buildFetchRequest({ httpOperation, mediaTypeContent, bodyInput, paramet
         const url = new URL(URI(serverUrl).segment(expandedPath).toString());
         url.search = new URLSearchParams(queryParamsWithAuth.map(nameAndValueObjectToPair)).toString();
         const body = typeof bodyInput === 'object' ? yield createRequestBody(mediaTypeContent, bodyInput) : bodyInput;
-        const headers = Object.assign(Object.assign({ 'Content-Type': (_f = mediaTypeContent === null || mediaTypeContent === void 0 ? void 0 : mediaTypeContent.mediaType) !== null && _f !== void 0 ? _f : 'application/json' }, Object.fromEntries(headersWithAuth.map(nameAndValueObjectToPair))), mockData === null || mockData === void 0 ? void 0 : mockData.header);
+        const headers = Object.assign(Object.assign(Object.assign({}, ((mediaTypeContent === null || mediaTypeContent === void 0 ? void 0 : mediaTypeContent.mediaType) !== 'multipart/form-data' && {
+            'Content-Type': (_f = mediaTypeContent === null || mediaTypeContent === void 0 ? void 0 : mediaTypeContent.mediaType) !== null && _f !== void 0 ? _f : 'application/json',
+        })), Object.fromEntries(headersWithAuth.map(nameAndValueObjectToPair))), mockData === null || mockData === void 0 ? void 0 : mockData.header);
         return [
             url.toString(),
             {
@@ -1395,6 +1409,9 @@ function getMockData(url, httpOperation, { isEnabled, code, dynamic, example })
     return isEnabled && url ? { url, header: buildPreferHeader({ code, dynamic, example }, httpOperation) } : undefined;
 }
 function buildPreferHeader({ code, example, dynamic }, httpOperation) {
+    if (!code) {
+        return undefined;
+    }
     const isCodeSupported = supportsResponseCode(httpOperation, code);
     const isExampleSupported = isCodeSupported && supportsExample(httpOperation, code, example);
     const args = compact([
@@ -1740,6 +1757,12 @@ const TryIt = ({ httpOperation, mockUrl, onRequestChange, requestBodyIndex, embe
         response && 'error' in response && React.createElement(ResponseError, { state: response })));
 };
 
+const LoadMore = ({ loading, onClick }) => {
+    return (React.createElement(Flex, { flexDirection: "col", justifyContent: "center", alignItems: "center", style: { height: '400px' } },
+        React.createElement(Button, { "aria-label": "load-example", onPress: onClick, appearance: "minimal", loading: loading, disabled: loading }, loading ? 'Loading...' : 'Load examples'),
+        React.createElement(Text, { fontSize: "base", textAlign: "center" }, "Large examples are not rendered by default.")));
+};
+
 const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode }) => {
     var _a;
     const [chosenExampleIndex, setChosenExampleIndex] = React__default.useState(0);
@@ -1754,7 +1777,10 @@ const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode
     const responseExample = useGenerateExampleFromMediaTypeContent(responseContents, chosenExampleIndex, {
         skipWriteOnly: true,
     });
-    const exceededSize = responseExample.split(/\r\n|\r|\n/).length > 500;
+    const handleLoadMore = () => {
+        setLoading(true);
+        setTimeout(() => setShow(true), 50);
+    };
     if (!userDefinedExamples && responseMediaType !== 'application/json')
         return null;
     if (!responseExample)
@@ -1762,12 +1788,7 @@ const ResponseExamples = ({ httpOperation, responseMediaType, responseStatusCode
     const examplesSelect = userDefinedExamples && userDefinedExamples.length > 1 && (React__default.createElement(Select, { "aria-label": "Response Example", value: String(chosenExampleIndex), options: userDefinedExamples.map((example, index) => ({ value: index, label: example.key })), onChange: (value) => setChosenExampleIndex(parseInt(String(value), 10)), size: "sm", triggerTextPrefix: "Response Example: " }));
     return (React__default.createElement(Panel, { rounded: true, isCollapsible: false },
         React__default.createElement(Panel.Titlebar, null, examplesSelect || React__default.createElement(Text, { color: "body" }, "Response Example")),
-        React__default.createElement(Panel.Content, { p: 0 }, (exceededSize && show) || !exceededSize ? (React__default.createElement(CodeViewer, { "aria-label": responseExample, noCopyButton: true, maxHeight: "400px", language: "json", value: responseExample, showLineNumbers: true })) : (React__default.createElement(Flex, { flexDirection: "col", justifyContent: "center", alignItems: "center", style: { height: '400px' } },
-            React__default.createElement(Button, { "aria-label": "load-example", onPress: () => {
-                    setLoading(true);
-                    setTimeout(() => setShow(true), 50);
-                }, appearance: "minimal", loading: loading, disabled: loading }, loading ? 'Loading...' : 'Load examples'),
-            React__default.createElement(Text, { fontSize: "base", textAlign: "center" }, "Large examples are not rendered by default."))))));
+        React__default.createElement(Panel.Content, { p: 0 }, show || !exceedsSize(responseExample) ? (React__default.createElement(CodeViewer, { "aria-label": responseExample, noCopyButton: true, maxHeight: "400px", language: "json", value: responseExample, showLineNumbers: true })) : (React__default.createElement(LoadMore, { loading: loading, onClick: handleLoadMore })))));
 };
 
 const TryItWithRequestSamples = (_a) => {
@@ -1861,22 +1882,23 @@ const Parameters = ({ parameters, parameterType }) => {
 };
 Parameters.displayName = 'HttpOperation.Parameters';
 const Parameter = ({ parameter, parameterType }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     if (!parameter)
         return null;
     const description = get(parameter, 'description') || get(parameter, 'schema.description');
-    const type = get(parameter, 'schema.type', 'unknown');
-    const format = (_a = parameter.schema) === null || _a === void 0 ? void 0 : _a.format;
+    const rootType = get(parameter, 'schema.type', 'unknown');
+    const type = ((_b = (_a = parameter.schema) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b['type']) && rootType === 'array' ? `array[${parameter.schema.items['type']}]` : rootType;
+    const format = (_c = parameter.schema) === null || _c === void 0 ? void 0 : _c.format;
     const deprecated = get(parameter, 'deprecated') || get(parameter, 'schema.deprecated', false);
-    const parameterExamples = ((_b = parameter.examples) === null || _b === void 0 ? void 0 : _b.map(example => {
+    const parameterExamples = ((_d = parameter.examples) === null || _d === void 0 ? void 0 : _d.map(example => {
         if (isNodeExample(example)) {
             return example.value;
         }
         return example.externalValue;
     })) || [];
-    const schemaExamples = (_c = parameter.schema) === null || _c === void 0 ? void 0 : _c.examples;
+    const schemaExamples = (_e = parameter.schema) === null || _e === void 0 ? void 0 : _e.examples;
     const schemaExamplesArray = Array.isArray(schemaExamples) ? schemaExamples : [];
-    const validations = omitBy(Object.assign(Object.assign(Object.assign({}, omit(parameter, ['name', 'required', 'deprecated', 'description', 'schema', 'style', 'examples'])), omit(get(parameter, 'schema'), ['description', 'type', 'deprecated'])), { examples: [...parameterExamples, ...schemaExamplesArray] }), value => (typeof value === 'object' && isEmpty(value)) || typeof value === 'undefined');
+    const validations = omitBy(Object.assign(Object.assign(Object.assign(Object.assign({}, omit(parameter, ['name', 'required', 'deprecated', 'description', 'schema', 'style', 'examples'])), omit(get(parameter, 'schema'), ['description', 'type', 'deprecated'])), omit(get(parameter, 'schema.items'), ['description', 'type', 'deprecated'])), { examples: [...parameterExamples, ...schemaExamplesArray] }), value => (typeof value === 'object' && isEmpty(value)) || typeof value === 'undefined');
     return (React.createElement("div", { className: "HttpOperation__Parameters" },
         React.createElement("div", { className: "sl-flex sl-items-center sl-my-2" },
             React.createElement("div", { className: "sl-flex sl-items-baseline sl-text-base sl-flex-1" },
@@ -2150,10 +2172,16 @@ const HttpService = withErrorBoundary(HttpServiceComponent, { recoverableProps:
 const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOptions, exportProps, }) => {
     var _a;
     const [chosenExampleIndex, setChosenExampleIndex] = React.useState(0);
+    const [show, setShow] = React.useState(false);
+    const [loading, setLoading] = React.useState(false);
     const resolveRef = useInlineRefResolver();
     const data = useResolvedObject(unresolvedData);
     const title = (_a = data.title) !== null && _a !== void 0 ? _a : nodeTitle;
     const isInternal = !!data['x-internal'];
+    const handleLoadMorePress = () => {
+        setLoading(true);
+        setTimeout(() => setShow(true), 50);
+    };
     const examples = React.useMemo(() => generateExamplesFromJsonSchema(data), [data]);
     const shouldDisplayHeader = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.noHeading) && (title !== undefined || (exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport)));
     const header = (shouldDisplayHeader || isInternal) && (React.createElement(React.Fragment, null,
@@ -2168,8 +2196,7 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
     const examplesSelect = examples.length > 1 && (React.createElement(Select, { "aria-label": "Example", value: String(chosenExampleIndex), options: examples.map(({ label }, index) => ({ value: index, label })), onChange: (value) => setChosenExampleIndex(parseInt(String(value), 10)), size: "sm", triggerTextPrefix: "Example: " }));
     const modelExamples = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideModelExamples) && (React.createElement(Panel, { rounded: true, isCollapsible: false },
         React.createElement(Panel.Titlebar, null, examplesSelect || (React.createElement(Text, { color: "body", role: "heading" }, "Example"))),
-        React.createElement(Panel.Content, { p: 0 },
-            React.createElement(CodeViewer, { "aria-label": examples[chosenExampleIndex].data, noCopyButton: true, maxHeight: "500px", language: "json", value: examples[chosenExampleIndex].data, showLineNumbers: true }))));
+        React.createElement(Panel.Content, { p: 0 }, show || !exceedsSize(examples[chosenExampleIndex].data) ? (React.createElement(CodeViewer, { "aria-label": examples[chosenExampleIndex].data, noCopyButton: true, maxHeight: "500px", language: "json", value: examples[chosenExampleIndex].data, showLineNumbers: true })) : (React.createElement(LoadMore, { loading: loading, onClick: handleLoadMorePress })))));
     return (React.createElement(TwoColumnLayout, { className: cn('Model', className), header: header, left: description, right: modelExamples }));
 };
 const Model = withErrorBoundary(ModelComponent, { recoverableProps: ['data'] });
@@ -2227,8 +2254,84 @@ const Logo = ({ logo }) => {
         React.createElement("img", { src: logo.url, height: "30px", width: "30px", alt: logo.altText }))) : (React.createElement("img", { src: logo.url, height: "30px", width: "30px", alt: logo.altText }))));
 };
 
+function useParsedValue(value) {
+    return React.useMemo(() => {
+        let parsedValue = value;
+        if (typeof value === 'string') {
+            try {
+                parsedValue = parse$1(value);
+            }
+            catch (error) {
+            }
+        }
+        return parsedValue;
+    }, [value]);
+}
+
+function isPartialHttpRequest(maybeHttpRequest) {
+    return (isObject(maybeHttpRequest) &&
+        'method' in maybeHttpRequest &&
+        typeof maybeHttpRequest['method'] === 'string' &&
+        'url' in maybeHttpRequest &&
+        typeof maybeHttpRequest['url'] === 'string');
+}
+const SchemaAndDescription = ({ title: titleProp, schema }) => {
+    const resolveRef = useInlineRefResolver();
+    const title = titleProp !== null && titleProp !== void 0 ? titleProp : schema.title;
+    return (React__default.createElement(Box, { py: 2 },
+        title && (React__default.createElement(Flex, { alignItems: "center", p: 2 },
+            React__default.createElement(FontAwesomeIcon, { icon: NodeTypeIconDefs[NodeType.Model], color: NodeTypeColors[NodeType.Model] }),
+            React__default.createElement(Box, { color: "muted", px: 2 }, title))),
+        React__default.createElement(JsonSchemaViewer, { resolveRef: resolveRef, schema: getOriginalObject(schema) })));
+};
+const CodeComponent = props => {
+    const { title, jsonSchema, http, children } = props;
+    const value = String(Array.isArray(children) ? children[0] : children);
+    const parsedValue = useParsedValue(value);
+    if (jsonSchema) {
+        if (!isJSONSchema(parsedValue)) {
+            return null;
+        }
+        return React__default.createElement(SchemaAndDescription, { title: title, schema: parsedValue });
+    }
+    if (http) {
+        if (!isObject(parsedValue) || (!isPartialHttpRequest(parsedValue) && !isHttpOperation(parsedValue))) {
+            return null;
+        }
+        return (React__default.createElement(TryIt, { httpOperation: isHttpOperation(parsedValue) ? parsedValue : parseHttpRequest(parsedValue), embeddedInMd: true }));
+    }
+    const DefaultCode = DefaultSMDComponents.code;
+    return React__default.createElement(DefaultCode, Object.assign({}, props));
+};
+function parseHttpRequest(data) {
+    const uri = URI(data.url);
+    const pathParam = data.url.match(/[^{\}]+(?=})/g);
+    return {
+        id: '?http-operation-id?',
+        method: data.method,
+        path: uri.is('absolute') ? uri.path() : data.url,
+        servers: [{ url: uri.is('absolute') ? uri.origin() : data.baseUrl || '' }],
+        request: Object.assign({ query: Object.entries(data.query || {}).map(([key, value]) => ({
+                name: key,
+                style: HttpParamStyles.Form,
+                schema: { default: Array.isArray(value) && value.length > 0 ? value[0] : value },
+            })), headers: Object.entries(data.headers || {}).map(([key, value]) => ({
+                name: key,
+                style: HttpParamStyles.Simple,
+                schema: { default: value },
+            })), path: pathParam === null || pathParam === void 0 ? void 0 : pathParam.map(name => ({
+                name,
+                style: HttpParamStyles.Simple,
+                required: true,
+            })) }, (data.body
+            ? { body: { contents: [{ mediaType: 'application/json', schema: { default: data.body } }] } }
+            : null)),
+        responses: [],
+    };
+}
+
 const MarkdownComponentsProvider = ({ value, children }) => {
-    return React.createElement(MarkdownViewerProvider, { components: value }, children);
+    return React.createElement(MarkdownViewerProvider, { components: Object.assign({ code: CodeComponent }, value) }, children);
 };
 
 const NODE_TYPE_TITLE_ICON = {
@@ -2523,20 +2626,6 @@ const doBundle = (data, baseUrl) => {
     }
 };
 
-function useParsedValue(value) {
-    return React.useMemo(() => {
-        let parsedValue = value;
-        if (typeof value === 'string') {
-            try {
-                parsedValue = parse$1(value);
-            }
-            catch (error) {
-            }
-        }
-        return parsedValue;
-    }, [value]);
-}
-
 const scopeClassName = 'sl-elements';
 class Styled extends React.Component {
     getChildContext() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "7.3.3",
+  "version": "7.3.7",
   "main": "./index.js",
   "sideEffects": [
     "web-components.min.js",
@@ -29,13 +29,13 @@
     "@fortawesome/react-fontawesome": "^0.1.11",
     "@stoplight/json": "^3.10.0",
     "@stoplight/json-schema-ref-parser": "^9.0.5",
-    "@stoplight/json-schema-sampler": "0.2.0",
+    "@stoplight/json-schema-sampler": "0.2.2",
     "@stoplight/json-schema-viewer": "^4.3.1",
     "@stoplight/markdown": "^3.1.1",
     "@stoplight/markdown-viewer": "^5.3.2",
-    "@stoplight/mosaic": "^1.5.0",
-    "@stoplight/mosaic-code-editor": "^1.5.0",
-    "@stoplight/mosaic-code-viewer": "^1.5.0",
+    "@stoplight/mosaic": "^1.8.2",
+    "@stoplight/mosaic-code-editor": "^1.8.2",
+    "@stoplight/mosaic-code-viewer": "^1.8.2",
     "@stoplight/path": "^1.3.2",
     "@stoplight/react-error-boundary": "^1.1.0",
     "@stoplight/types": "^12.0.0",