fix: docs ui

packages/elements/package.json

@@ -49,7 +49,7 @@
     "@stoplight/http-spec": "^3.2.6",
     "@stoplight/json": "^3.10.0",
     "@stoplight/json-schema-ref-parser": "^9.0.5",
-    "@stoplight/json-schema-viewer": "^4.0.0-beta.10",
+    "@stoplight/json-schema-viewer": "^4.0.0-beta.11",
     "@stoplight/markdown": "^2.10.0",
     "@stoplight/markdown-viewer": "^4.3.3",
     "@stoplight/mosaic": "1.0.0-beta.43",

packages/elements/src/components/Docs/HttpOperation/Body.tsx

@@ -43,7 +43,7 @@ export const Body = ({ body: { contents = [], description }, onChange }: BodyPro
         )
       }
     >
-      {description && <MarkdownViewer className="mb-6" markdown={description} />}
+      {description && <MarkdownViewer className="sl-my-2" markdown={description} />}
 
       {isJSONSchema(schema) && (
         <Box>

packages/elements/src/components/Docs/HttpOperation/Parameters.tsx

@@ -1,5 +1,5 @@
 import { Validations } from '@stoplight/json-schema-viewer';
-import { VStack } from '@stoplight/mosaic';
+import { Box, VStack } from '@stoplight/mosaic';
 import { Dictionary, HttpParamStyles, IHttpParam } from '@stoplight/types';
 import { get, isEmpty, omit, omitBy, sortBy } from 'lodash';
 import * as React from 'react';
@@ -35,7 +35,7 @@ export const Parameters: React.FunctionComponent<ParametersProps> = ({ parameter
   if (!parameters || !parameters.length) return null;
 
   return (
-    <VStack spacing={2} divider>
+    <VStack spacing={2} divider={<Box borderT borderColor="light" w="full"></Box>}>
       {sortBy(parameters, ['required', 'name']).map(parameter => {
         const resolvedSchema =
           parameter.schema?.$ref && resolveRef
@@ -85,7 +85,7 @@ export const Parameter: React.FunctionComponent<IParameterProps> = ({ parameter,
   return (
     <div className="HttpOperation__Parameters">
       <div className="sl-flex sl-items-center sl-my-2">
-        <div className="sl-flex sl-items-center sl-text-base sl-flex-1">
+        <div className="sl-flex sl-items-baseline sl-text-base sl-flex-1">
           <div className="sl-font-mono sl-font-bold">{parameter.name}</div>
           <div className={'ml-2 sl-text-muted'}>{format ? `${type}<${format}>` : type}</div>
         </div>
@@ -103,7 +103,10 @@ export const Parameter: React.FunctionComponent<IParameterProps> = ({ parameter,
 
       {parameter.style && defaultStyle[parameterType] !== parameter.style && (
         <div className="sl-flex sl-my-2">
-          <span className="sl-px-1 sl-text-muted sl-font-mono sl-border sl-rounded-lg sl-text-sm sl-capitalize">
+          <span
+            className="sl-px-1 sl-text-muted sl-font-mono sl-border sl-rounded-lg sl-text-sm sl-capitalize"
+            style={{ backgroundColor: '#EDF2F7' }}
+          >
             {readableStyles[parameter.style] || parameter.style}
           </span>
         </div>

packages/elements/src/components/Docs/Model/Model.tsx

@@ -4,9 +4,8 @@ import cn from 'classnames';
 import * as React from 'react';
 
 import { JSONSchema } from '../../../types';
-import { SchemaAndExamples } from '../../SchemaAndExamples';
+import { SchemaViewer } from '../../SchemaViewer';
 import { IDocsComponentProps } from '..';
-import { getExamplesFromSchema } from '../HttpOperation/utils';
 
 export type ModelProps = IDocsComponentProps<JSONSchema>;
 
@@ -15,7 +14,7 @@ const ModelComponent: React.FC<ModelProps> = ({ data, className, headless }) =>
     <div className={cn('Model MarkdownViewer', className)}>
       {!headless && data.title !== void 0 && <h1 className={Classes.HEADING}>{data.title}</h1>}
 
-      <SchemaAndExamples schema={data} description={data.description} examples={getExamplesFromSchema(data)} />
+      <SchemaViewer schema={data} description={data.description} />
     </div>
   );
 };

packages/elements/src/components/Docs/Sections.tsx

@@ -7,7 +7,7 @@ export interface ISectionTitle {
 
 export const SectionTitle: React.FC<ISectionTitle> = ({ title, children }) => {
   return (
-    <Flex role="heading" borderB borderColor="light" mb={3} pb={3} aria-label={title}>
+    <Flex role="heading" borderB mb={3} pb={3} aria-label={title}>
       <Text size="xl" fontWeight="semibold" mr={5}>
         {title}
       </Text>

packages/elements/src/components/MarkdownViewer/CustomComponents/CodeWithSchemaViewer.tsx

@@ -5,8 +5,7 @@ import React from 'react';
 
 import { useParsedValue } from '../../../hooks/useParsedValue';
 import { isJSONSchema } from '../../../utils/guards';
-import { getExamplesFromSchema } from '../../Docs/HttpOperation/utils';
-import { SchemaAndExamples } from '../../SchemaAndExamples';
+import { SchemaViewer } from '../../SchemaViewer';
 
 export const CodeWithSchemaViewer = (props: IComponentMappingProps<ICode<ICodeAnnotations>>) => {
   const {
@@ -21,13 +20,7 @@ export const CodeWithSchemaViewer = (props: IComponentMappingProps<ICode<ICodeAn
       return null;
     }
 
-    return (
-      <SchemaAndExamples
-        title={annotations?.title}
-        schema={parsedValue}
-        examples={getExamplesFromSchema(parsedValue)}
-      />
-    );
+    return <SchemaViewer title={annotations?.title} schema={parsedValue} />;
   }
 
   const DefaultCode = defaultComponentMapping.code!;

packages/elements/src/components/SchemaAndExamples.tsx → packages/elements/src/components/SchemaViewer.tsx

@@ -1,14 +1,10 @@
 import { Classes, Intent, Popover, PopoverInteractionKind, Tag } from '@blueprintjs/core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { safeStringify } from '@stoplight/json';
 import { JsonSchemaViewer, ViewMode } from '@stoplight/json-schema-viewer';
 import { CLASSNAMES } from '@stoplight/markdown-viewer';
-import { Dictionary, NodeType } from '@stoplight/types';
-import { CodeViewer } from '@stoplight/ui-kit/CodeViewer';
-import { SimpleTab, SimpleTabList, SimpleTabPanel, SimpleTabs } from '@stoplight/ui-kit/SimpleTabs';
+import { NodeType } from '@stoplight/types';
 import cn from 'classnames';
 import { JSONSchema4 } from 'json-schema';
-import { isEmpty, map } from 'lodash';
 import * as React from 'react';
 
 import { NodeTypeColors, NodeTypeIconDefs } from '../constants';
@@ -21,77 +17,31 @@ export interface ISchemaViewerProps {
   title?: string;
   description?: string;
   errors?: string[];
-  examples?: Dictionary<string>;
   className?: string;
-  forceShowTabs?: boolean;
   viewMode?: ViewMode;
 }
 
-export const SchemaAndExamples = ({
-  className,
-  title,
-  description,
-  schema,
-  examples,
-  errors,
-  viewMode,
-  forceShowTabs,
-}: ISchemaViewerProps) => {
-  const [selectedIndex, setSelectedIndex] = React.useState(0);
-
+export const SchemaViewer = ({ className, title, description, schema, errors, viewMode }: ISchemaViewerProps) => {
   const resolveRef = useInlineRefResolver();
-
-  const JSV = ({ jsvClassName }: { jsvClassName?: string }) => {
-    return (
-      <>
-        <SchemaTitle title={title} errors={errors} />
-
-        {description && <MarkdownViewer markdown={description} />}
-
-        <JsonSchemaViewer
-          resolveRef={resolveRef}
-          className={jsvClassName}
-          schema={schema as JSONSchema4}
-          viewMode={viewMode}
-        />
-      </>
-    );
-  };
-
-  if (isEmpty(examples) && !forceShowTabs) {
-    return <JSV jsvClassName={cn(className, 'dark:border-gray-9', CLASSNAMES.bordered, CLASSNAMES.block)} />;
-  }
-
   return (
-    <SimpleTabs
-      className={cn('SchemaViewer', className)}
-      selectedIndex={selectedIndex}
-      onSelect={setSelectedIndex}
-      forceRenderTabPanel
-    >
-      <SimpleTabList>
-        <SimpleTab>Schema</SimpleTab>
-
-        {map(examples, (_, key) => (
-          <SimpleTab key={key}>{key === 'default' ? 'Example' : key}</SimpleTab>
-        ))}
-      </SimpleTabList>
-
-      <SimpleTabPanel className="p-0">{<JSV />}</SimpleTabPanel>
-
-      {map(examples, (example, key) => {
-        return (
-          <SimpleTabPanel key={key} className="p-0">
-            <CodeViewer
-              language="json"
-              showLineNumbers
-              className="py-4 px-4 overflow-auto max-h-400px"
-              value={safeStringify(example, undefined, 2) || ''}
-            />
-          </SimpleTabPanel>
-        );
-      })}
-    </SimpleTabs>
+    <>
+      <SchemaTitle title={title} errors={errors} />
+
+      {description && <MarkdownViewer markdown={description} />}
+
+      <JsonSchemaViewer
+        resolveRef={resolveRef}
+        className={cn(className, CLASSNAMES.block)}
+        schema={
+          {
+            ...schema,
+            title: undefined,
+            description: undefined,
+          } as JSONSchema4
+        }
+        viewMode={viewMode}
+      />
+    </>
   );
 };
 

yarn.lock

@@ -4954,10 +4954,10 @@
     mobx-react-lite "^1.4.1"
     pluralize "^8.0.0"
 
-"@stoplight/json-schema-viewer@^4.0.0-beta.10":
-  version "4.0.0-beta.10"
-  resolved "https://registry.yarnpkg.com/@stoplight/json-schema-viewer/-/json-schema-viewer-4.0.0-beta.10.tgz#dfb6655691fd8e2a048eb1a76374e4db7828778d"
-  integrity sha512-PNzRVAbNOn4BkXGYrabklkW0rwLPRgqGlq6R+OkOoraJOt0sppu9API0mfco76m+jG3Go2W1FpjGFh651nrzBw==
+"@stoplight/json-schema-viewer@^4.0.0-beta.11":
+  version "4.0.0-beta.11"
+  resolved "https://registry.yarnpkg.com/@stoplight/json-schema-viewer/-/json-schema-viewer-4.0.0-beta.11.tgz#719d29174cbb45969ff74c795633d1502becc30b"
+  integrity sha512-cDGTxXKVCJxUbFM6ctQhjCVTQ9KXmq79Gkwd89zprex+1Iulf2PzQfVRfsfQAxoK6pohgLubgBt2/VuNBd13gw==
   dependencies:
     "@fortawesome/free-solid-svg-icons" "^5.15.2"
     "@stoplight/json" "^3.10.0"