Skip to content

Commit 0a5e49a

Browse files
lottamusmarbemac
lottamus
and
marbemac
authored
chore: use mosaic consistently (#175)
* chore: use mosiac consistently * lint * bump mosaic * update snaps with latest mosaic * remove unused import Co-authored-by: Marc MacLeod <marc@stoplight.io>
1 parent 686400b commit 0a5e49a

File tree

13 files changed

+404
-854
lines changed

13 files changed

+404
-854
lines changed

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

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

‎src/__tests__/index.spec.tsx‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -238,17 +238,17 @@ describe('Expanded depth', () => {
238238
expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
239239
"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\">
240240
<div data-overlay-container=\\"true\\">
241-
<div style=\\"padding-left: 25px\\" class=\\"JsonSchemaViewer\\">
242-
<div style=\\"margin-left: -25px\\">
241+
<div class=\\"JsonSchemaViewer\\">
242+
<div>
243243
<div>
244244
<div>array of:</div>
245-
<div style=\\"padding-left: 25px\\">
245+
<div>
246246
<div>
247247
<div>
248248
<div>
249249
<div>
250250
<div>
251-
<div style=\\"height: 12px; margin-top: 2px; left: -25px\\" role=\\"button\\"></div>
251+
<div role=\\"button\\"></div>
252252
<div>
253253
<div>foo</div>
254254
<span>array[object]</span>
@@ -275,17 +275,17 @@ describe('Expanded depth', () => {
275275
expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
276276
"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\">
277277
<div data-overlay-container=\\"true\\">
278-
<div style=\\"padding-left: 25px\\" class=\\"JsonSchemaViewer\\">
279-
<div style=\\"margin-left: -25px\\">
278+
<div class=\\"JsonSchemaViewer\\">
279+
<div>
280280
<div>
281281
<div>array of:</div>
282-
<div style=\\"padding-left: 25px\\">
282+
<div>
283283
<div>
284284
<div>
285285
<div>
286286
<div>
287287
<div>
288-
<div style=\\"height: 12px; margin-top: 2px; left: -25px\\" role=\\"button\\"></div>
288+
<div role=\\"button\\"></div>
289289
<div>
290290
<div>foo</div>
291291
<span>array[object]</span>
@@ -312,17 +312,17 @@ describe('Expanded depth', () => {
312312
expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
313313
"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\">
314314
<div data-overlay-container=\\"true\\">
315-
<div style=\\"padding-left: 25px\\" class=\\"JsonSchemaViewer\\">
316-
<div style=\\"margin-left: -25px\\">
315+
<div class=\\"JsonSchemaViewer\\">
316+
<div>
317317
<div>
318318
<div>array of:</div>
319-
<div style=\\"padding-left: 25px\\">
319+
<div>
320320
<div>
321321
<div>
322322
<div>
323323
<div>
324324
<div>
325-
<div style=\\"height: 12px; margin-top: 2px; left: -25px\\" role=\\"button\\"></div>
325+
<div role=\\"button\\"></div>
326326
<div>
327327
<div>foo</div>
328328
<span>array[object]</span>
@@ -332,13 +332,13 @@ describe('Expanded depth', () => {
332332
</div>
333333
<div></div>
334334
</div>
335-
<div style=\\"padding-left: 25px\\">
335+
<div>
336336
<div>
337337
<div>
338338
<div>
339339
<div>
340340
<div>
341-
<div style=\\"height: 12px; margin-top: 2px; left: -25px\\" role=\\"button\\"></div>
341+
<div role=\\"button\\"></div>
342342
<div>
343343
<div>bar</div>
344344
<span>object</span>
@@ -401,11 +401,11 @@ describe('Expanded depth', () => {
401401
expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
402402
"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\">
403403
<div data-overlay-container=\\"true\\">
404-
<div style=\\"padding-left: 25px\\" class=\\"JsonSchemaViewer\\">
405-
<div style=\\"margin-left: -25px\\">
404+
<div class=\\"JsonSchemaViewer\\">
405+
<div>
406406
<div>
407407
<div>array of:</div>
408-
<div style=\\"padding-left: 25px\\">
408+
<div>
409409
<div>
410410
<div>
411411
<div>
@@ -427,7 +427,7 @@ describe('Expanded depth', () => {
427427
<div>
428428
<div>
429429
<div>
430-
<div style=\\"height: 12px; margin-top: 2px; left: -25px\\" role=\\"button\\"></div>
430+
<div role=\\"button\\"></div>
431431
<div>
432432
<div>foo</div>
433433
<span>array[object]</span>
@@ -454,11 +454,11 @@ describe('Expanded depth', () => {
454454
expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
455455
"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\">
456456
<div data-overlay-container=\\"true\\">
457-
<div style=\\"padding-left: 25px\\" class=\\"JsonSchemaViewer\\">
458-
<div style=\\"margin-left: -25px\\">
457+
<div class=\\"JsonSchemaViewer\\">
458+
<div>
459459
<div>
460460
<div>array of:</div>
461-
<div style=\\"padding-left: 25px\\">
461+
<div>
462462
<div>
463463
<div>
464464
<div>
@@ -480,7 +480,7 @@ describe('Expanded depth', () => {
480480
<div>
481481
<div>
482482
<div>
483-
<div style=\\"height: 12px; margin-top: 2px; left: -25px\\" role=\\"button\\"></div>
483+
<div role=\\"button\\"></div>
484484
<div>
485485
<div>foo</div>
486486
<span>array[object]</span>
@@ -507,11 +507,11 @@ describe('Expanded depth', () => {
507507
expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
508508
"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\">
509509
<div data-overlay-container=\\"true\\">
510-
<div style=\\"padding-left: 25px\\" class=\\"JsonSchemaViewer\\">
511-
<div style=\\"margin-left: -25px\\">
510+
<div class=\\"JsonSchemaViewer\\">
511+
<div>
512512
<div>
513513
<div>array of:</div>
514-
<div style=\\"padding-left: 25px\\">
514+
<div>
515515
<div>
516516
<div>
517517
<div>
@@ -533,7 +533,7 @@ describe('Expanded depth', () => {
533533
<div>
534534
<div>
535535
<div>
536-
<div style=\\"height: 12px; margin-top: 2px; left: -25px\\" role=\\"button\\"></div>
536+
<div role=\\"button\\"></div>
537537
<div>
538538
<div>foo</div>
539539
<span>array[object]</span>
@@ -543,7 +543,7 @@ describe('Expanded depth', () => {
543543
</div>
544544
<div></div>
545545
</div>
546-
<div style=\\"padding-left: 25px\\">
546+
<div>
547547
<div>
548548
<div>
549549
<div>
@@ -640,15 +640,15 @@ describe('Expanded depth', () => {
640640
expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
641641
"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\">
642642
<div data-overlay-container=\\"true\\">
643-
<div style=\\"padding-left: 25px\\" class=\\"JsonSchemaViewer\\">
644-
<div style=\\"margin-left: -25px\\">
645-
<div style=\\"padding-left: 25px\\">
643+
<div class=\\"JsonSchemaViewer\\">
644+
<div>
645+
<div>
646646
<div>
647647
<div>
648648
<div>
649649
<div>
650650
<div>
651-
<div style=\\"height: 12px; margin-top: 2px; left: -25px\\" role=\\"button\\"></div>
651+
<div role=\\"button\\"></div>
652652
<div>
653653
<div>bar</div>
654654
<span>object</span>
@@ -665,7 +665,7 @@ describe('Expanded depth', () => {
665665
<div>
666666
<div>
667667
<div>
668-
<div style=\\"height: 12px; margin-top: 2px; left: -25px\\" role=\\"button\\"></div>
668+
<div role=\\"button\\"></div>
669669
<div>
670670
<div>foo</div>
671671
<span>array[object]</span>
@@ -720,7 +720,7 @@ describe('$ref resolving', () => {
720720
expect(dumpDom(<JsonSchemaViewer schema={schema} />)).toMatchInlineSnapshot(`
721721
"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\">
722722
<div data-overlay-container=\\"true\\">
723-
<div style=\\"padding-left: 25px\\" class=\\"JsonSchemaViewer\\">
723+
<div class=\\"JsonSchemaViewer\\">
724724
<div>
725725
<div>
726726
<div>
@@ -751,20 +751,20 @@ describe('$ref resolving', () => {
751751
expect(dumpDom(<JsonSchemaViewer schema={schema} />)).toMatchInlineSnapshot(`
752752
"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\">
753753
<div data-overlay-container=\\"true\\">
754-
<div style=\\"padding-left: 25px\\" class=\\"JsonSchemaViewer\\">
754+
<div class=\\"JsonSchemaViewer\\">
755755
<div>
756756
<div>
757757
<div>
758758
<div>
759759
<div>
760-
<div style=\\"height: 12px; margin-top: 2px; left: -25px\\" role=\\"button\\"></div>
760+
<div role=\\"button\\"></div>
761761
<div><span>$ref(#/foo)[]</span></div>
762762
</div>
763763
</div>
764764
</div>
765765
<div></div>
766766
</div>
767-
<div style=\\"padding-left: 25px\\">
767+
<div>
768768
<div>
769769
<div>
770770
<div>

‎src/components/JsonSchemaViewer.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,11 @@ const JsonSchemaViewerComponent: React.FC<JsonSchemaProps & ErrorBoundaryForward
8989
}, [jsonSchemaTreeRoot, onTreePopulated, nodeCount]);
9090

9191
if (isEmpty) {
92-
return <Box className={cn(className, 'JsonSchemaViewer', 'sl-text-sm')}>{emptyText}</Box>;
92+
return (
93+
<Box className={cn(className, 'JsonSchemaViewer')} fontSize="sm">
94+
{emptyText}
95+
</Box>
96+
);
9397
}
9498

9599
return (
@@ -98,7 +102,7 @@ const JsonSchemaViewerComponent: React.FC<JsonSchemaProps & ErrorBoundaryForward
98102
<ChildStack
99103
childNodes={jsonSchemaTreeRoot.children}
100104
currentNestingLevel={-1}
101-
className={cn(className, 'JsonSchemaViewer', 'sl-text-sm')}
105+
className={cn(className, 'JsonSchemaViewer')}
102106
RowComponent={TopLevelSchemaRow}
103107
/>
104108
</JSVOptionsContextProvider>
@@ -109,7 +113,9 @@ const JsonSchemaViewerComponent: React.FC<JsonSchemaProps & ErrorBoundaryForward
109113
const JsonSchemaFallbackComponent: React.FC<FallbackProps> = ({ error }) => {
110114
return (
111115
<Box p={4}>
112-
<b className="text-danger">Error</b>
116+
<Box as="b" color="danger">
117+
Error
118+
</Box>
113119
{error !== null ? `: ${error.message}` : null}
114120
</Box>
115121
);

‎src/components/SchemaRow/SchemaRow.tsx‎

Lines changed: 35 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@ import {
77
SchemaNode,
88
SchemaNodeKind,
99
} from '@stoplight/json-schema-tree';
10-
import { Icon, Select } from '@stoplight/mosaic';
11-
import cn from 'classnames';
10+
import { Box, Flex, Icon, Select } from '@stoplight/mosaic';
1211
import last from 'lodash/last.js';
1312
import * as React from 'react';
1413

@@ -56,19 +55,21 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = ({ schemaNode,
5655
const childNodes = React.useMemo(() => calculateChildrenToShow(typeToShow), [typeToShow]);
5756
const combiner = isRegularNode(schemaNode) && schemaNode.combiners?.length ? schemaNode.combiners[0] : null;
5857
return (
59-
<div className="sl-relative">
60-
<div className="sl-flex sl-max-w-full">
61-
<div className="sl-min-w-0 sl-flex-grow sl-max-w-full">
62-
<div
58+
<Box pos="relative">
59+
<Flex maxW="full">
60+
<Box maxW="full" flexGrow>
61+
<Box
6362
onClick={childNodes.length > 0 ? () => setExpanded(!isExpanded) : undefined}
64-
className={cn({ 'sl-cursor-pointer': childNodes.length > 0 })}
63+
cursor={childNodes.length > 0 ? 'pointer' : undefined}
6564
>
66-
<div className="sl-flex sl-items-center sl-my-2 sl-max-w-full">
65+
<Flex alignItems="center" my={2} maxW="full">
6766
{childNodes.length > 0 ? <Caret isExpanded={isExpanded} /> : null}
6867

69-
<div className="sl-flex sl-items-baseline sl-text-base sl-flex-1">
68+
<Flex alignItems="baseline" fontSize="base" flex={1}>
7069
{schemaNode.subpath.length > 0 && shouldShowPropertyName(schemaNode) && (
71-
<div className="sl-mr-2 sl-font-mono sl-font-semibold">{last(schemaNode.subpath)}</div>
70+
<Box mr={2} fontFamily="mono" fontWeight="semibold">
71+
{last(schemaNode.subpath)}
72+
</Box>
7273
)}
7374

7475
{choices.length === 1 && (
@@ -79,20 +80,25 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = ({ schemaNode,
7980
)}
8081

8182
{onGoToRef && isReferenceNode(schemaNode) && schemaNode.external ? (
82-
<a
83-
className="sl-ml-2 sl-cursor-pointer sl-text-primary-light"
83+
<Box
84+
as="a"
85+
ml={2}
86+
cursor="pointer"
87+
color="primary-light"
8488
onClick={(e: React.MouseEvent) => {
8589
e.preventDefault();
8690
e.stopPropagation();
8791
onGoToRef(schemaNode);
8892
}}
8993
>
9094
(go to ref)
91-
</a>
95+
</Box>
9296
) : null}
9397

9498
{schemaNode.subpath.length > 1 && schemaNode.subpath[0] === 'patternProperties' ? (
95-
<div className="sl-ml-2 sl-text-muted">(pattern property)</div>
99+
<Box ml={2} color="muted">
100+
(pattern property)
101+
</Box>
96102
) : null}
97103
{choices.length > 1 && (
98104
<Select
@@ -110,20 +116,25 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = ({ schemaNode,
110116
/>
111117
)}
112118

113-
{combiner !== null ? <div className="sl-ml-1 sl-text-muted">{combiner}</div> : null}
114-
</div>
119+
{combiner !== null ? (
120+
<Box ml={1} color="muted">
121+
{combiner}
122+
</Box>
123+
) : null}
124+
</Flex>
115125
<Properties
116126
required={isPropertyRequired(schemaNode)}
117127
deprecated={isRegularNode(schemaNode) && schemaNode.deprecated}
118128
validations={isRegularNode(schemaNode) ? schemaNode.validations : {}}
119129
/>
120-
</div>
130+
</Flex>
131+
121132
{typeof description === 'string' && description.length > 0 && (
122-
<div className="sl-flex sl-flex-1 sl-my-2 sl-text-base">
133+
<Flex flex={1} my={2} fontSize="base">
123134
<Description value={description} />
124-
</div>
135+
</Flex>
125136
)}
126-
</div>
137+
</Box>
127138

128139
<Validations
129140
validations={isRegularNode(schemaNode) ? getValidationsFromSchema(schemaNode) : {}}
@@ -134,13 +145,13 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = ({ schemaNode,
134145
// TODO (JJ): Add mosaic tooltip showing ref error
135146
<Icon title={refNode!.error!} color="danger" icon={faExclamationTriangle} size="sm" />
136147
)}
137-
</div>
138-
<div>{renderRowAddon ? renderRowAddon({ schemaNode, nestingLevel }) : null}</div>
139-
</div>
148+
</Box>
149+
<Box>{renderRowAddon ? renderRowAddon({ schemaNode, nestingLevel }) : null}</Box>
150+
</Flex>
140151
{childNodes.length > 0 && isExpanded ? (
141152
<ChildStack childNodes={childNodes} currentNestingLevel={nestingLevel} />
142153
) : null}
143-
</div>
154+
</Box>
144155
);
145156
};
146157

0 commit comments

Comments
 (0)