Skip to content
This repository was archived by the owner on Jun 28, 2024. It is now read-only.

Commit a78a006

Browse files
P0lipP0lip
authored
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
1 parent 8d63d36 commit a78a006

21 files changed

+88
-138
lines changed

‎package.json

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
"test.watch": "yarn test --watch"
3737
},
3838
"peerDependencies": {
39-
"@stoplight/ui-kit": "^1.46.0",
39+
"@stoplight/ui-kit": "^1.50.0",
4040
"react": "16.x.x"
4141
},
4242
"dependencies": {
@@ -48,22 +48,21 @@
4848
"@fortawesome/free-solid-svg-icons": "^5.6.1",
4949
"@stoplight/scripts": "^5.1.0",
5050
"@stoplight/storybook-config": "^1.5.0",
51-
"@stoplight/ui-kit": "^1.49.0",
51+
"@stoplight/ui-kit": "^1.50.0",
5252
"@types/jest": "^24.0.11",
5353
"@types/node": "^11.13.4",
5454
"@types/react": "16.8.x",
5555
"@types/react-dom": "16.8.x",
5656
"filer": "0.0.44",
5757
"jest": "^24.7.1",
5858
"lodash": "^4.17.11",
59-
"react": "^16.8.3",
60-
"react-dom": "^16.8.3",
59+
"react": "^16.8.6",
60+
"react-dom": "^16.8.6",
6161
"react-object-inspector": "0.2.x",
62-
"ts-essentials": "1.0.x",
6362
"ts-jest": "^24.0.2",
6463
"tslint": "^5.15.0",
6564
"tslint-config-stoplight": "^1.2.0",
66-
"typescript": "3.2.2",
65+
"typescript": "3.4.3",
6766
"util": "0.11.x"
6867
},
6968
"lint-staged": {

‎src/components/AutocompletionContext.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1+
import { Dictionary } from '@stoplight/types';
12
import * as React from 'react';
23

3-
import { Dictionary } from 'ts-essentials';
4-
54
export interface IAutocompletionOption {
65
value: any;
76
label: string;

‎src/components/CheckboxInput.tsx

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { IFormtronControl } from '..';
66
import { useDiagnostics } from './hooks';
77
import { Label } from './Label';
88
import { Messages } from './Messages';
9-
import { Variant } from './types';
109

1110
export const CheckboxInput: React.FunctionComponent<IFormtronControl> = ({
1211
id,
@@ -27,14 +26,7 @@ export const CheckboxInput: React.FunctionComponent<IFormtronControl> = ({
2726
</Messages>
2827
</Box>
2928
<Flex alignItems="center" flex="1">
30-
<Checkbox
31-
mr="auto"
32-
id={id}
33-
checked={value}
34-
onChange={onChange}
35-
invalid={variant === Variant.invalid}
36-
disabled={disabled}
37-
/>
29+
<Checkbox mr="auto" id={id} checked={value} onChange={onChange} variant={variant} disabled={disabled} />
3830
</Flex>
3931
</Flex>
4032
);

‎src/components/FieldSet.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import * as React from 'react';
22

3-
import { Box, IBox } from '@stoplight/ui-kit';
3+
import { Box, IBox, Variant } from '@stoplight/ui-kit';
44

55
import { useBorder } from './hooks';
6-
import { Variant } from './types';
76

87
interface IFieldSet extends IBox<HTMLFieldSetElement> {
98
legend: HTMLElement | string;

‎src/components/IntegerInput.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { IFormtronControl } from '..';
66
import { useDiagnostics } from './hooks';
77
import { Label } from './Label';
88
import { Messages } from './Messages';
9-
import { Variant } from './types';
109

1110
export const IntegerInput: React.FunctionComponent<IFormtronControl> = ({
1211
id,
@@ -37,7 +36,7 @@ export const IntegerInput: React.FunctionComponent<IFormtronControl> = ({
3736
step="1.0"
3837
value={value}
3938
onChange={(e: React.SyntheticEvent<HTMLInputElement>) => onChange(Number(e.currentTarget.value))}
40-
invalid={variant === Variant.invalid}
39+
variant={variant}
4140
disabled={disabled}
4241
width="100%"
4342
/>

‎src/components/JsonInput.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { IFormtronControl } from '..';
77
import { useDiagnostics } from './hooks';
88
import { Label } from './Label';
99
import { Messages } from './Messages';
10-
import { Variant } from './types';
1110
import { DraftValue } from './utils/DraftValue';
1211

1312
export const JsonInput: React.FunctionComponent<IFormtronControl> = ({
@@ -48,7 +47,7 @@ export const JsonInput: React.FunctionComponent<IFormtronControl> = ({
4847
id={id}
4948
value={value}
5049
onChange={(e: React.SyntheticEvent<HTMLTextAreaElement>) => onChange(e.currentTarget.value)}
51-
invalid={variant === Variant.invalid}
50+
variant={variant}
5251
disabled={disabled}
5352
width="100%"
5453
/>

‎src/components/Label.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import toUpper = require('lodash/toUpper');
22
import * as React from 'react';
33

4-
import { IText, Text } from '@stoplight/ui-kit';
5-
6-
import { Variant } from './types';
4+
import { IText, Text, Variant } from '@stoplight/ui-kit';
75

86
interface ILabel extends IText<HTMLLabelElement> {
97
variant?: Variant;

‎src/components/MarkdownInput.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { IFormtronControl } from '..';
77
import { useDiagnostics } from './hooks';
88
import { Label } from './Label';
99
import { Messages } from './Messages';
10-
import { Variant } from './types';
1110
import { ThrottleValue } from './utils/ThrottleValue';
1211

1312
export const MarkdownInput: React.FunctionComponent<IFormtronControl> = ({
@@ -37,7 +36,7 @@ export const MarkdownInput: React.FunctionComponent<IFormtronControl> = ({
3736
autosize={true}
3837
value={value}
3938
onChange={(e: React.SyntheticEvent<HTMLTextAreaElement>) => onChange(e.currentTarget.value)}
40-
invalid={variant === Variant.invalid}
39+
variant={variant}
4140
disabled={disabled}
4241
/>
4342
</Box>

‎src/components/Messages.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { Box, Popup } from '@stoplight/ui-kit';
55
import { Tooltip } from '@stoplight/ui-kit/Tooltip';
66

77
import { useDiagnostics } from './hooks';
8-
import { Variant } from './types';
98

109
interface IMessages {
1110
path: JsonPath;
@@ -22,7 +21,7 @@ export const Messages: React.FunctionComponent<IMessages> = ({ path, children })
2221
padding={3}
2322
renderContent={() =>
2423
showTooltip && (
25-
<Tooltip posX="left" invalid={variant === Variant.invalid}>
24+
<Tooltip posX="left" variant={variant}>
2625
{message}
2726
</Tooltip>
2827
)

‎src/components/ObjectInput.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import { useDiagnostics } from './hooks';
1111
import { IconButton } from './IconButton';
1212
import { Label } from './Label';
1313
import { Messages } from './Messages';
14-
import { Variant } from './types';
1514
import { DraftValue } from './utils/DraftValue';
1615
import { EasyObject } from './utils/EasyObject';
1716

@@ -31,11 +30,11 @@ export const ObjectInput: React.FunctionComponent<IFormtronControl> = ({
3130
const KeyWidget = fieldComponents[schema.keys.type];
3231
const ValWidget = fieldComponents[schema.values.type];
3332

34-
const noConflict = (key: any) => !(key in value);
33+
const noConflict = (key: PropertyKey) => !(key in value);
3534

3635
return (
3736
<Messages path={path}>
38-
<FieldSet position="relative" invalid={variant === Variant.invalid} legend={schema.title}>
37+
<FieldSet position="relative" variant={variant} legend={schema.title}>
3938
{easyObject.items.length === 0 ? (
4039
<Button
4140
fontWeight={800}

‎src/components/SelectInput.tsx

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import { AutocompletionContext } from './AutocompletionContext';
88
import { useDiagnostics } from './hooks';
99
import { Label } from './Label';
1010
import { Messages } from './Messages';
11-
import { Variant } from './types';
1211
import { DraftValue } from './utils/DraftValue';
1312

1413
export const SelectInput: React.FunctionComponent<IFormtronControl> = ({
@@ -62,7 +61,7 @@ export const SelectInput: React.FunctionComponent<IFormtronControl> = ({
6261
menuPlacement="auto"
6362
clearable={!schema.required}
6463
allowCreate={!schema.strict}
65-
invalid={variant === Variant.invalid}
64+
variant={variant}
6665
disabled={disabled}
6766
searchable={false}
6867
{...schema.custom && schema.custom.props}
@@ -124,13 +123,6 @@ export const MultiselectInput: React.FunctionComponent<IFormtronControl> = ({
124123
<Box flex="1">
125124
<Select
126125
key={JSON.stringify(value) + JSON.stringify(schema.options)}
127-
styles={{
128-
container: (base: any) => ({
129-
...base,
130-
display: 'inline-block',
131-
minWidth: 200,
132-
}),
133-
}}
134126
defaultValue={value.map(_value => ({ value: _value, label: _value }))}
135127
isMulti
136128
loadOptions={loadOptions}
@@ -142,7 +134,7 @@ export const MultiselectInput: React.FunctionComponent<IFormtronControl> = ({
142134
}
143135
menuPlacement="auto"
144136
allowCreate={!schema.strict}
145-
invalid={variant === Variant.invalid}
137+
variant={variant}
146138
disabled={disabled}
147139
clearable={false}
148140
searchable={false}

‎src/components/StringInput.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { IFormtronControl } from '..';
66
import { useDiagnostics } from './hooks';
77
import { Label } from './Label';
88
import { Messages } from './Messages';
9-
import { Variant } from './types';
109

1110
export const StringInput: React.FunctionComponent<IFormtronControl> = ({
1211
id,
@@ -37,7 +36,7 @@ export const StringInput: React.FunctionComponent<IFormtronControl> = ({
3736
maxLength={schema.maxLength}
3837
required={schema.required}
3938
flex="1"
40-
invalid={variant === Variant.invalid}
39+
variant={variant}
4140
disabled={disabled}
4241
width="100%"
4342
/>

‎src/components/ToggleInput.tsx

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { IFormtronControl } from '..';
66
import { useDiagnostics } from './hooks';
77
import { Label } from './Label';
88
import { Messages } from './Messages';
9-
import { Variant } from './types';
109

1110
export const ToggleInput: React.FunctionComponent<IFormtronControl> = ({
1211
id,
@@ -27,14 +26,7 @@ export const ToggleInput: React.FunctionComponent<IFormtronControl> = ({
2726
</Messages>
2827
</Box>
2928
<Flex alignItems="center" flex="1">
30-
<Toggle
31-
mr="auto"
32-
id={id}
33-
checked={value}
34-
onChange={onChange}
35-
invalid={variant === Variant.invalid}
36-
disabled={disabled}
37-
/>
29+
<Toggle mr="auto" id={id} checked={value} onChange={onChange} variant={variant} disabled={disabled} />
3830
</Flex>
3931
</Flex>
4032
);

‎src/components/__tests__/hooks.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { DiagnosticSeverity } from '@stoplight/types';
2+
import { Variant } from '@stoplight/ui-kit/types';
23
import * as React from 'react';
34
import { useDiagnostics } from '../hooks/useDiagnostics';
4-
import { Variant } from '../types';
55

66
jest.mock('react');
77
jest.mock('../DiagnosticMessagesContext');
@@ -19,7 +19,7 @@ describe('useDiagnostics', () => {
1919
it('should determine variant', () => {
2020
const { variant, messages } = useDiagnostics(['foo', 'bar']);
2121
expect(getMessages).toBeCalledWith(['foo', 'bar']);
22-
expect(variant).toBe(Variant.invalid);
22+
expect(variant).toBe(Variant.Invalid);
2323
expect(messages).toEqual([
2424
{
2525
severity: DiagnosticSeverity.Error,

‎src/components/hooks/useDiagnostics.ts

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
1-
import { DiagnosticSeverity, JsonPath } from '@stoplight/types';
1+
import { DiagnosticSeverity, Dictionary, JsonPath } from '@stoplight/types';
2+
import { Variant } from '@stoplight/ui-kit/types';
23
import { useContext } from 'react';
34

45
import { IFormtronDiagnostic } from '../../types';
56
import { DiagnosticMessagesContext, IDiagnosticMessagesProvider } from '../DiagnosticMessagesContext';
6-
import { Variant } from '../types';
7+
8+
const variantsMap: Dictionary<Variant, DiagnosticSeverity> = {
9+
[DiagnosticSeverity.Hint]: Variant.Default,
10+
[DiagnosticSeverity.Information]: Variant.Default,
11+
[DiagnosticSeverity.Error]: Variant.Invalid,
12+
[DiagnosticSeverity.Warning]: Variant.Warning,
13+
};
714

815
export type UseDiagnostics = (
916
path: JsonPath
@@ -17,9 +24,5 @@ export const useDiagnostics: UseDiagnostics = path => {
1724
const messages = getMessages(path);
1825
const severity = Math.min(...messages.map(({ severity }) => severity));
1926

20-
let variant: Variant = Variant.normal;
21-
if (severity === DiagnosticSeverity.Error || severity === DiagnosticSeverity.Warning) {
22-
variant = Variant.invalid;
23-
}
24-
return { variant, messages };
27+
return { variant: variantsMap[severity], messages };
2528
};

‎src/components/hooks/useTheme.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const capitalize = require('lodash/capitalize');
2+
import { Variant } from '@stoplight/ui-kit';
23

34
import { useTheme } from '../../theme';
4-
import { Variant } from '../types';
55

66
const useProp = (prop: string) => (variant?: Variant) => {
77
const theme = useTheme();

‎src/components/types.ts

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎src/computeOps.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Dictionary } from 'ts-essentials';
1+
import { Dictionary } from '@stoplight/types';
22
import { deriveFormData } from './deriveFormData';
33
import { IOperation, Resolver } from './types';
44

‎src/deriveFormData.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import { Dictionary } from '@stoplight/types';
12
import get = require('lodash/get');
2-
import { Dictionary } from 'ts-essentials';
33

44
// @ts-ignore
55
import memoize from '@stoplight/memoize-one';

‎src/types.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import { IDiagnostic, IRange, JsonPath, Omit } from '@stoplight/types';
1+
import { Dictionary, IDiagnostic, IRange, JsonPath, Omit } from '@stoplight/types';
22
import * as React from 'react';
3-
import { Dictionary } from 'ts-essentials';
43
import { themeTypes } from './theme';
54

65
export type Resolver = (path: JsonPath) => unknown;

0 commit comments

Comments
 (0)