feat: formtron warnings [STU-52] (#52)

* chore: bump dev deps

* chore: bump ui-kit

* feat: warnings

* feat: remove ts-essentials

* fix: tooltip + tests

* fix: styles

* fix: tslint

* refactor: 🔥 🔥 🔥

* chore: update both ui-kit dependencies... because software

package.json

@@ -36,7 +36,7 @@
     "test.watch": "yarn test --watch"
   },
   "peerDependencies": {
-    "@stoplight/ui-kit": "^1.46.0",
+    "@stoplight/ui-kit": "^1.50.0",
     "react": "16.x.x"
   },
   "dependencies": {
@@ -48,22 +48,21 @@
     "@fortawesome/free-solid-svg-icons": "^5.6.1",
     "@stoplight/scripts": "^5.1.0",
     "@stoplight/storybook-config": "^1.5.0",
-    "@stoplight/ui-kit": "^1.49.0",
+    "@stoplight/ui-kit": "^1.50.0",
     "@types/jest": "^24.0.11",
     "@types/node": "^11.13.4",
     "@types/react": "16.8.x",
     "@types/react-dom": "16.8.x",
     "filer": "0.0.44",
     "jest": "^24.7.1",
     "lodash": "^4.17.11",
-    "react": "^16.8.3",
-    "react-dom": "^16.8.3",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "react-object-inspector": "0.2.x",
-    "ts-essentials": "1.0.x",
     "ts-jest": "^24.0.2",
     "tslint": "^5.15.0",
     "tslint-config-stoplight": "^1.2.0",
-    "typescript": "3.2.2",
+    "typescript": "3.4.3",
     "util": "0.11.x"
   },
   "lint-staged": {

src/components/AutocompletionContext.ts

@@ -1,7 +1,6 @@
+import { Dictionary } from '@stoplight/types';
 import * as React from 'react';
 
-import { Dictionary } from 'ts-essentials';
-
 export interface IAutocompletionOption {
   value: any;
   label: string;

src/components/CheckboxInput.tsx

@@ -6,7 +6,6 @@ import { IFormtronControl } from '..';
 import { useDiagnostics } from './hooks';
 import { Label } from './Label';
 import { Messages } from './Messages';
-import { Variant } from './types';
 
 export const CheckboxInput: React.FunctionComponent<IFormtronControl> = ({
   id,
@@ -27,14 +26,7 @@ export const CheckboxInput: React.FunctionComponent<IFormtronControl> = ({
         </Messages>
       </Box>
       <Flex alignItems="center" flex="1">
-        <Checkbox
-          mr="auto"
-          id={id}
-          checked={value}
-          onChange={onChange}
-          invalid={variant === Variant.invalid}
-          disabled={disabled}
-        />
+        <Checkbox mr="auto" id={id} checked={value} onChange={onChange} variant={variant} disabled={disabled} />
       </Flex>
     </Flex>
   );

src/components/FieldSet.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
 
-import { Box, IBox } from '@stoplight/ui-kit';
+import { Box, IBox, Variant } from '@stoplight/ui-kit';
 
 import { useBorder } from './hooks';
-import { Variant } from './types';
 
 interface IFieldSet extends IBox<HTMLFieldSetElement> {
   legend: HTMLElement | string;

src/components/IntegerInput.tsx

@@ -6,7 +6,6 @@ import { IFormtronControl } from '..';
 import { useDiagnostics } from './hooks';
 import { Label } from './Label';
 import { Messages } from './Messages';
-import { Variant } from './types';
 
 export const IntegerInput: React.FunctionComponent<IFormtronControl> = ({
   id,
@@ -37,7 +36,7 @@ export const IntegerInput: React.FunctionComponent<IFormtronControl> = ({
           step="1.0"
           value={value}
           onChange={(e: React.SyntheticEvent<HTMLInputElement>) => onChange(Number(e.currentTarget.value))}
-          invalid={variant === Variant.invalid}
+          variant={variant}
           disabled={disabled}
           width="100%"
         />

src/components/JsonInput.tsx

@@ -7,7 +7,6 @@ import { IFormtronControl } from '..';
 import { useDiagnostics } from './hooks';
 import { Label } from './Label';
 import { Messages } from './Messages';
-import { Variant } from './types';
 import { DraftValue } from './utils/DraftValue';
 
 export const JsonInput: React.FunctionComponent<IFormtronControl> = ({
@@ -48,7 +47,7 @@ export const JsonInput: React.FunctionComponent<IFormtronControl> = ({
                 id={id}
                 value={value}
                 onChange={(e: React.SyntheticEvent<HTMLTextAreaElement>) => onChange(e.currentTarget.value)}
-                invalid={variant === Variant.invalid}
+                variant={variant}
                 disabled={disabled}
                 width="100%"
               />

src/components/Label.tsx

@@ -1,9 +1,7 @@
 import toUpper = require('lodash/toUpper');
 import * as React from 'react';
 
-import { IText, Text } from '@stoplight/ui-kit';
-
-import { Variant } from './types';
+import { IText, Text, Variant } from '@stoplight/ui-kit';
 
 interface ILabel extends IText<HTMLLabelElement> {
   variant?: Variant;

src/components/MarkdownInput.tsx

@@ -7,7 +7,6 @@ import { IFormtronControl } from '..';
 import { useDiagnostics } from './hooks';
 import { Label } from './Label';
 import { Messages } from './Messages';
-import { Variant } from './types';
 import { ThrottleValue } from './utils/ThrottleValue';
 
 export const MarkdownInput: React.FunctionComponent<IFormtronControl> = ({
@@ -37,7 +36,7 @@ export const MarkdownInput: React.FunctionComponent<IFormtronControl> = ({
               autosize={true}
               value={value}
               onChange={(e: React.SyntheticEvent<HTMLTextAreaElement>) => onChange(e.currentTarget.value)}
-              invalid={variant === Variant.invalid}
+              variant={variant}
               disabled={disabled}
             />
           </Box>

src/components/Messages.tsx

@@ -5,7 +5,6 @@ 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: JsonPath;
@@ -22,7 +21,7 @@ export const Messages: React.FunctionComponent<IMessages> = ({ path, children })
       padding={3}
       renderContent={() =>
         showTooltip && (
-          <Tooltip posX="left" invalid={variant === Variant.invalid}>
+          <Tooltip posX="left" variant={variant}>
             {message}
           </Tooltip>
         )

src/components/ObjectInput.tsx

@@ -11,7 +11,6 @@ import { useDiagnostics } from './hooks';
 import { IconButton } from './IconButton';
 import { Label } from './Label';
 import { Messages } from './Messages';
-import { Variant } from './types';
 import { DraftValue } from './utils/DraftValue';
 import { EasyObject } from './utils/EasyObject';
 
@@ -31,11 +30,11 @@ export const ObjectInput: React.FunctionComponent<IFormtronControl> = ({
   const KeyWidget = fieldComponents[schema.keys.type];
   const ValWidget = fieldComponents[schema.values.type];
 
-  const noConflict = (key: any) => !(key in value);
+  const noConflict = (key: PropertyKey) => !(key in value);
 
   return (
     <Messages path={path}>
-      <FieldSet position="relative" invalid={variant === Variant.invalid} legend={schema.title}>
+      <FieldSet position="relative" variant={variant} legend={schema.title}>
         {easyObject.items.length === 0 ? (
           <Button
             fontWeight={800}

src/components/SelectInput.tsx

@@ -8,7 +8,6 @@ import { AutocompletionContext } from './AutocompletionContext';
 import { useDiagnostics } from './hooks';
 import { Label } from './Label';
 import { Messages } from './Messages';
-import { Variant } from './types';
 import { DraftValue } from './utils/DraftValue';
 
 export const SelectInput: React.FunctionComponent<IFormtronControl> = ({
@@ -62,7 +61,7 @@ export const SelectInput: React.FunctionComponent<IFormtronControl> = ({
                         menuPlacement="auto"
                         clearable={!schema.required}
                         allowCreate={!schema.strict}
-                        invalid={variant === Variant.invalid}
+                        variant={variant}
                         disabled={disabled}
                         searchable={false}
                         {...schema.custom && schema.custom.props}
@@ -124,13 +123,6 @@ export const MultiselectInput: React.FunctionComponent<IFormtronControl> = ({
               <Box flex="1">
                 <Select
                   key={JSON.stringify(value) + JSON.stringify(schema.options)}
-                  styles={{
-                    container: (base: any) => ({
-                      ...base,
-                      display: 'inline-block',
-                      minWidth: 200,
-                    }),
-                  }}
                   defaultValue={value.map(_value => ({ value: _value, label: _value }))}
                   isMulti
                   loadOptions={loadOptions}
@@ -142,7 +134,7 @@ export const MultiselectInput: React.FunctionComponent<IFormtronControl> = ({
                   }
                   menuPlacement="auto"
                   allowCreate={!schema.strict}
-                  invalid={variant === Variant.invalid}
+                  variant={variant}
                   disabled={disabled}
                   clearable={false}
                   searchable={false}

src/components/StringInput.tsx

@@ -6,7 +6,6 @@ import { IFormtronControl } from '..';
 import { useDiagnostics } from './hooks';
 import { Label } from './Label';
 import { Messages } from './Messages';
-import { Variant } from './types';
 
 export const StringInput: React.FunctionComponent<IFormtronControl> = ({
   id,
@@ -37,7 +36,7 @@ export const StringInput: React.FunctionComponent<IFormtronControl> = ({
           maxLength={schema.maxLength}
           required={schema.required}
           flex="1"
-          invalid={variant === Variant.invalid}
+          variant={variant}
           disabled={disabled}
           width="100%"
         />

src/components/ToggleInput.tsx

@@ -6,7 +6,6 @@ import { IFormtronControl } from '..';
 import { useDiagnostics } from './hooks';
 import { Label } from './Label';
 import { Messages } from './Messages';
-import { Variant } from './types';
 
 export const ToggleInput: React.FunctionComponent<IFormtronControl> = ({
   id,
@@ -27,14 +26,7 @@ export const ToggleInput: React.FunctionComponent<IFormtronControl> = ({
         </Messages>
       </Box>
       <Flex alignItems="center" flex="1">
-        <Toggle
-          mr="auto"
-          id={id}
-          checked={value}
-          onChange={onChange}
-          invalid={variant === Variant.invalid}
-          disabled={disabled}
-        />
+        <Toggle mr="auto" id={id} checked={value} onChange={onChange} variant={variant} disabled={disabled} />
       </Flex>
     </Flex>
   );

src/components/__tests__/hooks.spec.ts

@@ -1,7 +1,7 @@
 import { DiagnosticSeverity } from '@stoplight/types';
+import { Variant } from '@stoplight/ui-kit/types';
 import * as React from 'react';
 import { useDiagnostics } from '../hooks/useDiagnostics';
-import { Variant } from '../types';
 
 jest.mock('react');
 jest.mock('../DiagnosticMessagesContext');
@@ -19,7 +19,7 @@ describe('useDiagnostics', () => {
   it('should determine variant', () => {
     const { variant, messages } = useDiagnostics(['foo', 'bar']);
     expect(getMessages).toBeCalledWith(['foo', 'bar']);
-    expect(variant).toBe(Variant.invalid);
+    expect(variant).toBe(Variant.Invalid);
     expect(messages).toEqual([
       {
         severity: DiagnosticSeverity.Error,

src/components/hooks/useDiagnostics.ts

@@ -1,9 +1,16 @@
-import { DiagnosticSeverity, JsonPath } from '@stoplight/types';
+import { DiagnosticSeverity, Dictionary, JsonPath } from '@stoplight/types';
+import { Variant } from '@stoplight/ui-kit/types';
 import { useContext } from 'react';
 
 import { IFormtronDiagnostic } from '../../types';
 import { DiagnosticMessagesContext, IDiagnosticMessagesProvider } from '../DiagnosticMessagesContext';
-import { Variant } from '../types';
+
+const variantsMap: Dictionary<Variant, DiagnosticSeverity> = {
+  [DiagnosticSeverity.Hint]: Variant.Default,
+  [DiagnosticSeverity.Information]: Variant.Default,
+  [DiagnosticSeverity.Error]: Variant.Invalid,
+  [DiagnosticSeverity.Warning]: Variant.Warning,
+};
 
 export type UseDiagnostics = (
   path: JsonPath
@@ -17,9 +24,5 @@ export const useDiagnostics: UseDiagnostics = path => {
   const messages = getMessages(path);
   const severity = Math.min(...messages.map(({ severity }) => severity));
 
-  let variant: Variant = Variant.normal;
-  if (severity === DiagnosticSeverity.Error || severity === DiagnosticSeverity.Warning) {
-    variant = Variant.invalid;
-  }
-  return { variant, messages };
+  return { variant: variantsMap[severity], messages };
 };

src/components/hooks/useTheme.ts

@@ -1,7 +1,7 @@
 const capitalize = require('lodash/capitalize');
+import { Variant } from '@stoplight/ui-kit';
 
 import { useTheme } from '../../theme';
-import { Variant } from '../types';
 
 const useProp = (prop: string) => (variant?: Variant) => {
   const theme = useTheme();

src/computeOps.ts

@@ -1,4 +1,4 @@
-import { Dictionary } from 'ts-essentials';
+import { Dictionary } from '@stoplight/types';
 import { deriveFormData } from './deriveFormData';
 import { IOperation, Resolver } from './types';
 

src/deriveFormData.ts

@@ -1,5 +1,5 @@
+import { Dictionary } from '@stoplight/types';
 import get = require('lodash/get');
-import { Dictionary } from 'ts-essentials';
 
 // @ts-ignore
 import memoize from '@stoplight/memoize-one';

src/types.ts

@@ -1,6 +1,5 @@
-import { IDiagnostic, IRange, JsonPath, Omit } from '@stoplight/types';
+import { Dictionary, IDiagnostic, IRange, JsonPath, Omit } from '@stoplight/types';
 import * as React from 'react';
-import { Dictionary } from 'ts-essentials';
 import { themeTypes } from './theme';
 
 export type Resolver = (path: JsonPath) => unknown;