feat: use new IDiagnostic type [SL-2125] (#45)

BREAKING CHANGES: The diagnostics interface has changed and the `show` now shows fields instead of hides them.


* feat: use new IDiagnostic type

* chore: storybook v5

* fix: summary should be consumed

* chore: remove @emotion/core

* feat: less TypeScript-ish

* fix: show means show, not hide

Author: P0lip

package.json

@@ -41,12 +41,13 @@
   },
   "dependencies": {
     "@stoplight/memoize-one": "4.0.x",
+    "@stoplight/types": "^4.1.0",
     "expression-eval": "1.4.0"
   },
   "devDependencies": {
     "@fortawesome/free-solid-svg-icons": "^5.6.1",
     "@stoplight/scripts": "4.0.0",
-    "@stoplight/storybook-config": "1.1.1",
+    "@stoplight/storybook-config": "1.4.0",
     "@stoplight/ui-kit": "^1.46.0",
     "@types/react": "16.8.x",
     "@types/react-dom": "16.8.x",

src/@emotion__core.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { boolean, number, select, text } from '@storybook/addon-knobs/react';
+import { boolean, select, text } from '@storybook/addon-knobs/react';
 
 import { ThemeZone } from '../theme';
 
@@ -13,9 +13,9 @@ export const Tooltips = (storyFn: Function) => {
     if (path.length > 0) return [];
     return [
       {
-        summary: text('message', ''),
-        severity: number('severity', 40),
-        severityLabel: select('severityLabel', ['warn', 'anything-other-than-warn'], 'warn'),
+        message: text('message', ''),
+        // Will wanted it to be less TypeScript-ish hence numbers are listed
+        severity: select('severity', [0, 1, 2, 3], 1),
       },
     ];
   };
@@ -27,9 +27,9 @@ export const PathTooltips = (storyFn: Function) => {
     return boolean('show path tooltips', false)
       ? [
           {
-            summary: path.join(' > '),
-            severity: number('severity', 0),
-            severityLabel: select('severityLabel', ['warn', 'anything-other-than-warn'], 'anything-other-than-warn'),
+            message: path.join(' > '),
+            // Will wanted it to be less TypeScript-ish hence numbers are listed
+            severity: select('severity', [0, 1, 2, 3], 1),
           },
         ]
       : [];

src/__stories__/decorators.tsx

@@ -1,12 +1,7 @@
+import { JsonPath } from '@stoplight/types';
 import * as React from 'react';
+import { IFormtronDiagnostic } from '../types';
 
-export interface IDiagnosticMessage {
-  severity: number;
-  severityLabel: string;
-  summary?: string;
-  message?: string;
-}
-
-export type IDiagnosticMessagesProvider = (path: string[]) => IDiagnosticMessage[];
+export type IDiagnosticMessagesProvider = (path: JsonPath) => IFormtronDiagnostic[];
 
 export const DiagnosticMessagesContext = React.createContext<IDiagnosticMessagesProvider>(() => []);

src/components/DiagnosticMessagesContext.ts

@@ -62,7 +62,7 @@ export const Form: React.FunctionComponent<IFormtronControl> = ({
       const { show, evalOptions, type } = propSchema;
 
       // if evalutating show is false skip area
-      if (show && evaluate(show, value, name, true)) {
+      if (show && !evaluate(show, value, name, true)) {
         return;
       }
 

src/components/Form.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
 
+import { JsonPath } from '@stoplight/types';
 import { Box, Popup } from '@stoplight/ui-kit';
 import { Tooltip } from '@stoplight/ui-kit/Tooltip';
 
 import { useDiagnostics } from './hooks';
 import { Variant } from './types';
 
 interface IMessages {
-  path: string[];
+  path: JsonPath;
 }
 
 export const Messages: React.FunctionComponent<IMessages> = ({ path, children }) => {

src/components/Messages.tsx

@@ -1,3 +1,4 @@
+import { DiagnosticSeverity } from '@stoplight/types';
 import * as React from 'react';
 import { useDiagnostics } from '../hooks/useDiagnostics';
 import { Variant } from '../types';
@@ -7,14 +8,12 @@ jest.mock('../DiagnosticMessagesContext');
 
 const getMessages = jest.fn(() => [
   {
-    severity: 10,
-    severityLabel: 'warn',
-    summary: 'An error happened',
+    severity: DiagnosticSeverity.Error,
     message: 'Cannot foobar undefines',
   },
 ]);
-// @ts-ignore
-React.useContext.mockImplementation(() => getMessages);
+
+(React.useContext as jest.Mock).mockImplementation(() => getMessages);
 
 describe('useDiagnostics', () => {
   it('should determine variant', () => {
@@ -23,9 +22,7 @@ describe('useDiagnostics', () => {
     expect(variant).toBe(Variant.invalid);
     expect(messages).toEqual([
       {
-        severity: 10,
-        severityLabel: 'warn',
-        summary: 'An error happened',
+        severity: DiagnosticSeverity.Error,
         message: 'Cannot foobar undefines',
       },
     ]);

src/components/__tests__/hooks.spec.ts

@@ -1,21 +1,24 @@
+import { DiagnosticSeverity, JsonPath } from '@stoplight/types';
 import { useContext } from 'react';
 
-import { DiagnosticMessagesContext } from '../DiagnosticMessagesContext';
+import { IFormtronDiagnostic } from '../../types';
+import { DiagnosticMessagesContext, IDiagnosticMessagesProvider } from '../DiagnosticMessagesContext';
 import { Variant } from '../types';
 
-export const useDiagnostics = (path: string[]) => {
-  const getMessages = useContext(DiagnosticMessagesContext);
+export type UseDiagnostics = (
+  path: JsonPath
+) => {
+  variant: Variant;
+  messages: IFormtronDiagnostic[];
+};
+
+export const useDiagnostics: UseDiagnostics = path => {
+  const getMessages = useContext<IDiagnosticMessagesProvider>(DiagnosticMessagesContext);
   const messages = getMessages(path);
-  let severity = -1;
-  let severityLabel = '';
-  for (const message of messages) {
-    if (message.severity > severity) {
-      severity = message.severity;
-      severityLabel = message.severityLabel;
-    }
-  }
+  const severity = Math.min(...messages.map(({ severity }) => severity));
+
   let variant: Variant = Variant.normal;
-  if (severityLabel === 'warn') {
+  if (severity === DiagnosticSeverity.Error || severity === DiagnosticSeverity.Warning) {
     variant = Variant.invalid;
   }
   return { variant, messages };

src/components/hooks/useDiagnostics.ts

@@ -1,3 +1,4 @@
+import { IDiagnostic, IRange, Omit } from '@stoplight/types';
 import * as React from 'react';
 import { Dictionary } from 'ts-essentials';
 import { themeTypes } from './theme';
@@ -23,6 +24,11 @@ export interface IFormtron extends IFormtronCommon {
   themeName?: themeTypes;
 }
 
+export interface IFormtronDiagnostic extends Omit<IDiagnostic, 'range'> {
+  summary?: string;
+  range?: IRange;
+}
+
 export interface IAddOperation {
   op: 'add';
   path: string;