Skip to content

Commit 3c5029e

Browse files
author
Jakub Jankowski
authored
fix: ui fixes (#127)
* chore: ui fixes * test: update snapshots * fix: snapshots * test: update snapshot * chore: export validations * fix: carret and item name * fix: more snapshots
1 parent a60a6d3 commit 3c5029e

File tree

8 files changed

+130
-121
lines changed

8 files changed

+130
-121
lines changed

‎src/__tests__/__snapshots__/index.spec.tsx.snap‎

Lines changed: 80 additions & 80 deletions
Large diffs are not rendered by default.

‎src/__tests__/index.spec.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,7 @@ describe('Expanded depth', () => {
238238
expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
239239
"<div class=\\"\\">
240240
<div class=\\"JsonSchemaViewer\\">
241-
<div style=\\"margin-left: 20px\\">
241+
<div>
242242
<div>
243243
<div>
244244
<div>
@@ -263,7 +263,7 @@ describe('Expanded depth', () => {
263263
expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
264264
"<div class=\\"\\">
265265
<div class=\\"JsonSchemaViewer\\">
266-
<div style=\\"margin-left: 20px\\">
266+
<div>
267267
<div>
268268
<div>
269269
<div>
@@ -306,7 +306,7 @@ describe('Expanded depth', () => {
306306
expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
307307
"<div class=\\"\\">
308308
<div class=\\"JsonSchemaViewer\\">
309-
<div style=\\"margin-left: 20px\\">
309+
<div>
310310
<div>
311311
<div>
312312
<div>
@@ -401,7 +401,7 @@ describe('Expanded depth', () => {
401401
expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
402402
"<div class=\\"\\">
403403
<div class=\\"JsonSchemaViewer\\">
404-
<div style=\\"margin-left: 20px\\">
404+
<div>
405405
<div>
406406
<div>
407407
<div>
@@ -426,7 +426,7 @@ describe('Expanded depth', () => {
426426
expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
427427
"<div class=\\"\\">
428428
<div class=\\"JsonSchemaViewer\\">
429-
<div style=\\"margin-left: 20px\\">
429+
<div>
430430
<div>
431431
<div>
432432
<div>
@@ -485,7 +485,7 @@ describe('Expanded depth', () => {
485485
expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
486486
"<div class=\\"\\">
487487
<div class=\\"JsonSchemaViewer\\">
488-
<div style=\\"margin-left: 20px\\">
488+
<div>
489489
<div>
490490
<div>
491491
<div>
@@ -624,7 +624,7 @@ describe('Expanded depth', () => {
624624
expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
625625
"<div class=\\"\\">
626626
<div class=\\"JsonSchemaViewer\\">
627-
<div style=\\"margin-left: 20px\\">
627+
<div>
628628
<div>
629629
<div>
630630
<div>
@@ -678,7 +678,7 @@ describe('$ref resolving', () => {
678678
expect(dumpDom(<JsonSchemaViewer schema={schema} />)).toMatchInlineSnapshot(`
679679
"<div class=\\"\\">
680680
<div class=\\"JsonSchemaViewer\\">
681-
<div style=\\"margin-left: 20px\\">
681+
<div>
682682
<div>
683683
<div>
684684
<div>
@@ -707,7 +707,7 @@ describe('$ref resolving', () => {
707707
expect(dumpDom(<JsonSchemaViewer schema={schema} />)).toMatchInlineSnapshot(`
708708
"<div class=\\"\\">
709709
<div class=\\"JsonSchemaViewer\\">
710-
<div style=\\"margin-left: 20px\\">
710+
<div>
711711
<div>
712712
<div>
713713
<div>

‎src/components/JsonSchemaViewer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ const JsonSchemaViewerComponent: React.FC<JsonSchemaProps & ErrorBoundaryForward
6666
<ChildStack
6767
childNodes={jsonSchemaTreeRoot.children}
6868
currentNestingLevel={-1}
69-
className={cn(className, 'JsonSchemaViewer', 'sl-mr-5')}
69+
className={cn(className, 'JsonSchemaViewer')}
7070
/>
7171
</JSVOptionsContextProvider>
7272
</MosaicProvider>

‎src/components/SchemaRow/SchemaRow.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
isMirroredNode,
44
isReferenceNode,
55
isRegularNode,
6+
isRootNode,
67
ReferenceNode,
78
SchemaNode,
89
SchemaNodeKind,
@@ -56,9 +57,13 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = ({ schemaNode,
5657
const isBrokenRef = typeof refNode?.error === 'string';
5758

5859
const childNodes = React.useMemo(() => calculateChildrenToShow(typeToShow), [typeToShow]);
59-
6060
return (
61-
<div className="sl-text-sm sl-relative" style={{ marginLeft: CARET_ICON_BOX_DIMENSION }}>
61+
<div
62+
className="sl-text-sm sl-relative"
63+
style={{
64+
...(schemaNode.parent && !isRootNode(schemaNode.parent) ? { marginLeft: CARET_ICON_BOX_DIMENSION } : null),
65+
}}
66+
>
6267
<div className="sl-flex">
6368
<div className="sl-min-w-0 sl-flex-grow">
6469
<div
@@ -85,7 +90,7 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = ({ schemaNode,
8590
/>
8691
) : null}
8792

88-
<div className="sl-flex sl-items-center sl-text-base sl-flex-1">
93+
<div className="sl-flex sl-items-baseline sl-text-base sl-flex-1">
8994
{schemaNode.subpath.length > 0 && shouldShowPropertyName(schemaNode) && (
9095
<div className="sl-mr-2 sl-font-mono sl-font-bold">{last(schemaNode.subpath)}</div>
9196
)}
@@ -137,7 +142,7 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = ({ schemaNode,
137142
</div>
138143

139144
{typeof description === 'string' && description.length > 0 && (
140-
<div className="sl-flex sl-flex-1 sl-my-2 sl-py-px">
145+
<div className="sl-flex sl-flex-1 sl-my-2 sl-text-base">
141146
<Description value={description} />
142147
</div>
143148
)}

‎src/components/shared/Caret.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export interface ICaret {
1010

1111
export const Caret: React.FunctionComponent<ICaret> = ({ style, size, isExpanded }) => (
1212
<div
13-
className="sl-flex sl-absolute sl-justify-center sl-p-1 sl-cursor-pointer sl-text-muted"
13+
className="sl-flex sl-absolute sl-justify-center sl-items-center sl-p-1 sl-cursor-pointer sl-text-muted"
1414
style={style}
1515
role="button"
1616
>

‎src/components/shared/Validations.tsx‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { RegularNode } from '@stoplight/json-schema-tree';
22
import { Dictionary } from '@stoplight/types';
3+
import cn from 'classnames';
34
import { capitalize, keys, omit, pick, pickBy, uniq } from 'lodash';
45
import * as React from 'react';
56

@@ -99,9 +100,7 @@ const NumberValidations = ({
99100
{entries
100101
.map(([key, value]) => numberValidationFormatters[key](value))
101102
.map((value, i) => (
102-
<span key={i} className="sl-mr-2 sl-px-1 sl-font-mono sl-border sl-rounded-lg">
103-
{value}
104-
</span>
103+
<Value key={i} name={value} className="sl-mr-2" />
105104
))}
106105
</div>
107106
);
@@ -127,30 +126,35 @@ const KeyValueValidation = ({ name, values }: { name: string; values: string[] }
127126
<div className="sl-flex sl-flex-wrap sl-text-muted sl-my-2">
128127
<span className="sl-text-light">{capitalize(name)}:</span>
129128
{uniq(values).map(value => (
130-
<span key={value} className="sl-ml-2 sl-px-1 sl-font-mono sl-border sl-rounded-lg">
131-
{value}
132-
</span>
129+
<Value key={value} name={value} className="sl-ml-2" />
133130
))}
134131
</div>
135132
);
136133
};
137134

138135
const NameValidations = ({ validations }: { validations: Dictionary<unknown> }) => (
139136
<>
140-
{keys(validations)
141-
.filter(key => validations[key])
142-
.map(key => {
143-
return (
144-
<div className="sl-flex sl-flex-1 sl-my-2" key={key}>
145-
<span className="sl-px-1 sl-text-muted sl-font-mono sl-border sl-rounded-lg sl-text-sm sl-capitalize">
146-
{key}
147-
</span>
148-
</div>
149-
);
150-
})}
137+
{keys(validations).length ? (
138+
<div className="sl-flex sl-flex-wrap sl-my-2">
139+
{keys(validations)
140+
.filter(key => validations[key])
141+
.map(key => (
142+
<Value key={key} name={key} className="sl-mr-2 sl-text-muted sl-capitalize" />
143+
))}
144+
</div>
145+
) : null}
151146
</>
152147
);
153148

149+
const Value = ({ name, className }: { name: string; className?: string }) => (
150+
<span
151+
className={cn('sl-px-1 sl-font-mono sl-border sl-rounded-lg', className)}
152+
style={{ backgroundColor: '#EDF2F7' }}
153+
>
154+
{name}
155+
</span>
156+
);
157+
154158
export function validationCount(schemaNode: RegularNode) {
155159
const validations = getValidationsFromSchema(schemaNode);
156160
const validationKeys = keys(omit(validations, excludedValidations));

0 commit comments

Comments
 (0)