feat: hide examples option (#134)

Author: Jakub Jankowski

src/__stories__/JsonSchemaViewer.tsx

@@ -1,6 +1,6 @@
 import { Button, Flex, InvertTheme, subscribeTheme } from '@stoplight/mosaic';
 import { action } from '@storybook/addon-actions';
-import { number, object, select, withKnobs } from '@storybook/addon-knobs';
+import { boolean, number, object, select, withKnobs } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 import { JSONSchema4 } from 'json-schema';
 import * as React from 'react';
@@ -35,6 +35,7 @@ storiesOf('JsonSchemaViewer', module)
         },
         'standalone',
       )}
+      hideExamples={boolean('hideExamples', false)}
       onGoToRef={action('onGoToRef')}
     />
   ))

src/components/JsonSchemaViewer.tsx

@@ -24,6 +24,7 @@ const JsonSchemaViewerComponent: React.FC<JsonSchemaProps & ErrorBoundaryForward
   defaultExpandedDepth = 2,
   onGoToRef,
   renderRowAddon,
+  hideExamples,
 }) => {
   const jsonSchemaTreeRoot = React.useMemo(() => {
     const jsonSchemaTree = new JsonSchemaTree(schema, {
@@ -49,11 +50,12 @@ const JsonSchemaViewerComponent: React.FC<JsonSchemaProps & ErrorBoundaryForward
     jsonSchemaTreeRoot,
   ]);
 
-  const options = React.useMemo(() => ({ defaultExpandedDepth, viewMode, onGoToRef, renderRowAddon }), [
+  const options = React.useMemo(() => ({ defaultExpandedDepth, viewMode, onGoToRef, renderRowAddon, hideExamples }), [
     defaultExpandedDepth,
     viewMode,
     onGoToRef,
     renderRowAddon,
+    hideExamples,
   ]);
 
   if (isEmpty) {

src/components/SchemaRow/SchemaRow.tsx

@@ -29,7 +29,7 @@ export interface SchemaRowProps {
 export const SchemaRow: React.FunctionComponent<SchemaRowProps> = ({ schemaNode, nestingLevel }) => {
   const description = isRegularNode(schemaNode) ? schemaNode.annotations.description : null;
 
-  const { defaultExpandedDepth, renderRowAddon, onGoToRef } = useJSVOptionsContext();
+  const { defaultExpandedDepth, renderRowAddon, onGoToRef, hideExamples } = useJSVOptionsContext();
 
   const [isExpanded, setExpanded] = React.useState<boolean>(
     !isMirroredNode(schemaNode) && nestingLevel <= defaultExpandedDepth,
@@ -148,7 +148,10 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = ({ schemaNode,
             )}
           </div>
 
-          <Validations validations={isRegularNode(schemaNode) ? getValidationsFromSchema(schemaNode) : {}} />
+          <Validations
+            validations={isRegularNode(schemaNode) ? getValidationsFromSchema(schemaNode) : {}}
+            hideExamples={hideExamples}
+          />
 
           {isBrokenRef && (
             // TODO (JJ): Add mosaic tooltip showing ref error

src/components/shared/Validations.tsx

@@ -6,6 +6,7 @@ import * as React from 'react';
 
 export interface IValidations {
   validations: Dictionary<unknown>;
+  hideExamples?: boolean;
 }
 
 type ValidationFormat = {
@@ -24,6 +25,8 @@ export const numberValidationNames = [
   'exclusiveMaximum',
 ];
 
+const exampleValidationNames = ['examples', 'example', 'x-example'];
+
 const excludedValidations = ['exclusiveMinimum', 'exclusiveMaximum', 'readOnly', 'writeOnly'];
 
 const numberValidationFormatters: Record<string, (value: unknown) => string> = {
@@ -101,7 +104,7 @@ function filterOutOasFormatValidations(format: string, values: Dictionary<unknow
   return newValues;
 }
 
-export const Validations: React.FunctionComponent<IValidations> = ({ validations }) => {
+export const Validations: React.FunctionComponent<IValidations> = ({ validations, hideExamples }) => {
   const numberValidations = pick(validations, numberValidationNames);
   const booleanValidations = omit(
     pickBy(validations, v => ['true', 'false'].includes(String(v))),
@@ -111,6 +114,7 @@ export const Validations: React.FunctionComponent<IValidations> = ({ validations
     ...keys(numberValidations),
     ...keys(booleanValidations),
     ...excludedValidations,
+    ...(hideExamples ? exampleValidationNames : []),
   ]);
 
   return (

src/components/shared/__tests__/Validations.spec.tsx

@@ -48,6 +48,20 @@ describe('Validations component', () => {
     expect(wrapper).toIncludeText('Allowed value:"bar"');
   });
 
+  it('should not render hidden example validations', () => {
+    const node = new RegularNode({
+      type: 'number',
+      example: 42,
+      examples: [4, 2],
+    });
+
+    const validations = getValidationsFromSchema(node);
+    const wrapper = mount(<Validations validations={validations} hideExamples />);
+
+    expect(wrapper).not.toIncludeText('Example value:42');
+    expect(wrapper).not.toIncludeText('Example values:42');
+  });
+
   describe('OAS formats', () => {
     it('given default range, should not render any validation', () => {
       const node = new RegularNode({

src/contexts/jsvOptions.tsx

@@ -7,9 +7,14 @@ export type JSVOptions = {
   viewMode: ViewMode;
   onGoToRef?: GoToRefHandler;
   renderRowAddon?: RowAddonRenderer;
+  hideExamples?: boolean;
 };
 
-const JSVOptionsContext = React.createContext<JSVOptions>({ defaultExpandedDepth: 0, viewMode: 'standalone' });
+const JSVOptionsContext = React.createContext<JSVOptions>({
+  defaultExpandedDepth: 0,
+  viewMode: 'standalone',
+  hideExamples: false,
+});
 
 export const useJSVOptionsContext = () => React.useContext(JSVOptionsContext);