Skip to content

chore: use mosaic consistently #175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Nov 30, 2021
Merged

chore: use mosaic consistently #175

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ac3beb4
chore: use mosiac consistently
lottamus Nov 23, 2021
43b98ba
lint
lottamus Nov 23, 2021
92e6861
Merge branch 'master' into chris/mosaic-padding-constant
marbemac Nov 25, 2021
1f89d4c
bump mosaic
lottamus Nov 30, 2021
abca134
update snaps with latest mosaic
lottamus Nov 30, 2021
caab991
Merge branch 'master' into chris/mosaic-padding-constant
lottamus Nov 30, 2021
2aec7a9
remove unused import
lottamus Nov 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
358 changes: 179 additions & 179 deletions src/__tests__/__snapshots__/index.spec.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

72 changes: 36 additions & 36 deletions src/__tests__/index.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,17 +238,17 @@ describe('Expanded depth', () => {
expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\">
<div data-overlay-container=\\"true\\">
<div style=\\"padding-left: 25px\\" class=\\"JsonSchemaViewer\\">
<div style=\\"margin-left: -25px\\">
<div class=\\"JsonSchemaViewer\\">
<div>
<div>
<div>array of:</div>
<div style=\\"padding-left: 25px\\">
<div>
<div>
<div>
<div>
<div>
<div>
<div style=\\"height: 12px; margin-top: 2px; left: -25px\\" role=\\"button\\"></div>
<div role=\\"button\\"></div>
<div>
<div>foo</div>
<span>array[object]</span>
Expand All @@ -275,17 +275,17 @@ describe('Expanded depth', () => {
expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\">
<div data-overlay-container=\\"true\\">
<div style=\\"padding-left: 25px\\" class=\\"JsonSchemaViewer\\">
<div style=\\"margin-left: -25px\\">
<div class=\\"JsonSchemaViewer\\">
<div>
<div>
<div>array of:</div>
<div style=\\"padding-left: 25px\\">
<div>
<div>
<div>
<div>
<div>
<div>
<div style=\\"height: 12px; margin-top: 2px; left: -25px\\" role=\\"button\\"></div>
<div role=\\"button\\"></div>
<div>
<div>foo</div>
<span>array[object]</span>
Expand All @@ -312,17 +312,17 @@ describe('Expanded depth', () => {
expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\">
<div data-overlay-container=\\"true\\">
<div style=\\"padding-left: 25px\\" class=\\"JsonSchemaViewer\\">
<div style=\\"margin-left: -25px\\">
<div class=\\"JsonSchemaViewer\\">
<div>
<div>
<div>array of:</div>
<div style=\\"padding-left: 25px\\">
<div>
<div>
<div>
<div>
<div>
<div>
<div style=\\"height: 12px; margin-top: 2px; left: -25px\\" role=\\"button\\"></div>
<div role=\\"button\\"></div>
<div>
<div>foo</div>
<span>array[object]</span>
Expand All @@ -332,13 +332,13 @@ describe('Expanded depth', () => {
</div>
<div></div>
</div>
<div style=\\"padding-left: 25px\\">
<div>
<div>
<div>
<div>
<div>
<div>
<div style=\\"height: 12px; margin-top: 2px; left: -25px\\" role=\\"button\\"></div>
<div role=\\"button\\"></div>
<div>
<div>bar</div>
<span>object</span>
Expand Down Expand Up @@ -401,11 +401,11 @@ describe('Expanded depth', () => {
expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\">
<div data-overlay-container=\\"true\\">
<div style=\\"padding-left: 25px\\" class=\\"JsonSchemaViewer\\">
<div style=\\"margin-left: -25px\\">
<div class=\\"JsonSchemaViewer\\">
<div>
<div>
<div>array of:</div>
<div style=\\"padding-left: 25px\\">
<div>
<div>
<div>
<div>
Expand All @@ -427,7 +427,7 @@ describe('Expanded depth', () => {
<div>
<div>
<div>
<div style=\\"height: 12px; margin-top: 2px; left: -25px\\" role=\\"button\\"></div>
<div role=\\"button\\"></div>
<div>
<div>foo</div>
<span>array[object]</span>
Expand All @@ -454,11 +454,11 @@ describe('Expanded depth', () => {
expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\">
<div data-overlay-container=\\"true\\">
<div style=\\"padding-left: 25px\\" class=\\"JsonSchemaViewer\\">
<div style=\\"margin-left: -25px\\">
<div class=\\"JsonSchemaViewer\\">
<div>
<div>
<div>array of:</div>
<div style=\\"padding-left: 25px\\">
<div>
<div>
<div>
<div>
Expand All @@ -480,7 +480,7 @@ describe('Expanded depth', () => {
<div>
<div>
<div>
<div style=\\"height: 12px; margin-top: 2px; left: -25px\\" role=\\"button\\"></div>
<div role=\\"button\\"></div>
<div>
<div>foo</div>
<span>array[object]</span>
Expand All @@ -507,11 +507,11 @@ describe('Expanded depth', () => {
expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\">
<div data-overlay-container=\\"true\\">
<div style=\\"padding-left: 25px\\" class=\\"JsonSchemaViewer\\">
<div style=\\"margin-left: -25px\\">
<div class=\\"JsonSchemaViewer\\">
<div>
<div>
<div>array of:</div>
<div style=\\"padding-left: 25px\\">
<div>
<div>
<div>
<div>
Expand All @@ -533,7 +533,7 @@ describe('Expanded depth', () => {
<div>
<div>
<div>
<div style=\\"height: 12px; margin-top: 2px; left: -25px\\" role=\\"button\\"></div>
<div role=\\"button\\"></div>
<div>
<div>foo</div>
<span>array[object]</span>
Expand All @@ -543,7 +543,7 @@ describe('Expanded depth', () => {
</div>
<div></div>
</div>
<div style=\\"padding-left: 25px\\">
<div>
<div>
<div>
<div>
Expand Down Expand Up @@ -640,15 +640,15 @@ describe('Expanded depth', () => {
expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\">
<div data-overlay-container=\\"true\\">
<div style=\\"padding-left: 25px\\" class=\\"JsonSchemaViewer\\">
<div style=\\"margin-left: -25px\\">
<div style=\\"padding-left: 25px\\">
<div class=\\"JsonSchemaViewer\\">
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div style=\\"height: 12px; margin-top: 2px; left: -25px\\" role=\\"button\\"></div>
<div role=\\"button\\"></div>
<div>
<div>bar</div>
<span>object</span>
Expand All @@ -665,7 +665,7 @@ describe('Expanded depth', () => {
<div>
<div>
<div>
<div style=\\"height: 12px; margin-top: 2px; left: -25px\\" role=\\"button\\"></div>
<div role=\\"button\\"></div>
<div>
<div>foo</div>
<span>array[object]</span>
Expand Down Expand Up @@ -720,7 +720,7 @@ describe('$ref resolving', () => {
expect(dumpDom(<JsonSchemaViewer schema={schema} />)).toMatchInlineSnapshot(`
"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\">
<div data-overlay-container=\\"true\\">
<div style=\\"padding-left: 25px\\" class=\\"JsonSchemaViewer\\">
<div class=\\"JsonSchemaViewer\\">
<div>
<div>
<div>
Expand Down Expand Up @@ -751,20 +751,20 @@ describe('$ref resolving', () => {
expect(dumpDom(<JsonSchemaViewer schema={schema} />)).toMatchInlineSnapshot(`
"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\">
<div data-overlay-container=\\"true\\">
<div style=\\"padding-left: 25px\\" class=\\"JsonSchemaViewer\\">
<div class=\\"JsonSchemaViewer\\">
<div>
<div>
<div>
<div>
<div>
<div style=\\"height: 12px; margin-top: 2px; left: -25px\\" role=\\"button\\"></div>
<div role=\\"button\\"></div>
<div><span>$ref(#/foo)[]</span></div>
</div>
</div>
</div>
<div></div>
</div>
<div style=\\"padding-left: 25px\\">
<div>
<div>
<div>
<div>
Expand Down
12 changes: 9 additions & 3 deletions src/components/JsonSchemaViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,11 @@ const JsonSchemaViewerComponent: React.FC<JsonSchemaProps & ErrorBoundaryForward
}, [jsonSchemaTreeRoot, onTreePopulated, nodeCount]);

if (isEmpty) {
return <Box className={cn(className, 'JsonSchemaViewer', 'sl-text-sm')}>{emptyText}</Box>;
return (
<Box className={cn(className, 'JsonSchemaViewer')} fontSize="sm">
{emptyText}
</Box>
);
}

return (
Expand All @@ -98,7 +102,7 @@ const JsonSchemaViewerComponent: React.FC<JsonSchemaProps & ErrorBoundaryForward
<ChildStack
childNodes={jsonSchemaTreeRoot.children}
currentNestingLevel={-1}
className={cn(className, 'JsonSchemaViewer', 'sl-text-sm')}
className={cn(className, 'JsonSchemaViewer')}
RowComponent={TopLevelSchemaRow}
/>
</JSVOptionsContextProvider>
Expand All @@ -109,7 +113,9 @@ const JsonSchemaViewerComponent: React.FC<JsonSchemaProps & ErrorBoundaryForward
const JsonSchemaFallbackComponent: React.FC<FallbackProps> = ({ error }) => {
return (
<Box p={4}>
<b className="text-danger">Error</b>
<Box as="b" color="danger">
Error
</Box>
{error !== null ? `: ${error.message}` : null}
</Box>
);
Expand Down
59 changes: 35 additions & 24 deletions src/components/SchemaRow/SchemaRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@ import {
SchemaNode,
SchemaNodeKind,
} from '@stoplight/json-schema-tree';
import { Icon, Select } from '@stoplight/mosaic';
import cn from 'classnames';
import { Box, Flex, Icon, Select } from '@stoplight/mosaic';
import last from 'lodash/last.js';
import * as React from 'react';

Expand Down Expand Up @@ -56,19 +55,21 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = ({ schemaNode,
const childNodes = React.useMemo(() => calculateChildrenToShow(typeToShow), [typeToShow]);
const combiner = isRegularNode(schemaNode) && schemaNode.combiners?.length ? schemaNode.combiners[0] : null;
return (
<div className="sl-relative">
<div className="sl-flex sl-max-w-full">
<div className="sl-min-w-0 sl-flex-grow sl-max-w-full">
<div
<Box pos="relative">
<Flex maxW="full">
<Box maxW="full" flexGrow>
<Box
onClick={childNodes.length > 0 ? () => setExpanded(!isExpanded) : undefined}
className={cn({ 'sl-cursor-pointer': childNodes.length > 0 })}
cursor={childNodes.length > 0 ? 'pointer' : undefined}
>
<div className="sl-flex sl-items-center sl-my-2 sl-max-w-full">
<Flex alignItems="center" my={2} maxW="full">
{childNodes.length > 0 ? <Caret isExpanded={isExpanded} /> : null}

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

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

{onGoToRef && isReferenceNode(schemaNode) && schemaNode.external ? (
<a
className="sl-ml-2 sl-cursor-pointer sl-text-primary-light"
<Box
as="a"
ml={2}
cursor="pointer"
color="primary-light"
onClick={(e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();
onGoToRef(schemaNode);
}}
>
(go to ref)
</a>
</Box>
) : null}

{schemaNode.subpath.length > 1 && schemaNode.subpath[0] === 'patternProperties' ? (
<div className="sl-ml-2 sl-text-muted">(pattern property)</div>
<Box ml={2} color="muted">
(pattern property)
</Box>
) : null}
{choices.length > 1 && (
<Select
Expand All @@ -110,20 +116,25 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = ({ schemaNode,
/>
)}

{combiner !== null ? <div className="sl-ml-1 sl-text-muted">{combiner}</div> : null}
</div>
{combiner !== null ? (
<Box ml={1} color="muted">
{combiner}
</Box>
) : null}
</Flex>
<Properties
required={isPropertyRequired(schemaNode)}
deprecated={isRegularNode(schemaNode) && schemaNode.deprecated}
validations={isRegularNode(schemaNode) ? schemaNode.validations : {}}
/>
</div>
</Flex>

{typeof description === 'string' && description.length > 0 && (
<div className="sl-flex sl-flex-1 sl-my-2 sl-text-base">
<Flex flex={1} my={2} fontSize="base">
<Description value={description} />
</div>
</Flex>
)}
</div>
</Box>

<Validations
validations={isRegularNode(schemaNode) ? getValidationsFromSchema(schemaNode) : {}}
Expand All @@ -134,13 +145,13 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = ({ schemaNode,
// TODO (JJ): Add mosaic tooltip showing ref error
<Icon title={refNode!.error!} color="danger" icon={faExclamationTriangle} size="sm" />
)}
</div>
<div>{renderRowAddon ? renderRowAddon({ schemaNode, nestingLevel }) : null}</div>
</div>
</Box>
<Box>{renderRowAddon ? renderRowAddon({ schemaNode, nestingLevel }) : null}</Box>
</Flex>
{childNodes.length > 0 && isExpanded ? (
<ChildStack childNodes={childNodes} currentNestingLevel={nestingLevel} />
) : null}
</div>
</Box>
);
};

Expand Down
Loading