Skip to content

fix: ui fixes #127

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
Parent: feat: v4 stable release
merged 8 commits into from
Apr 7, 2021
Merged

fix: ui fixes #127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5fa7cd7
chore: ui fixes
Apr 7, 2021
b21a282
test: update snapshots
Apr 7, 2021
9000d3c
fix: snapshots
Apr 7, 2021
b0400c4
Merge branch 'beta' into chore/ui-fixes
Apr 7, 2021
b49c0b5
test: update snapshot
Apr 7, 2021
f2cd526
chore: export validations
Apr 7, 2021
015184d
fix: carret and item name
Apr 7, 2021
ecf0e21
fix: more snapshots
Apr 7, 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
160 changes: 80 additions & 80 deletions src/__tests__/__snapshots__/index.spec.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

18 changes: 9 additions & 9 deletions src/__tests__/index.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,7 @@ describe('Expanded depth', () => {
expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
"<div class=\\"\\">
<div class=\\"JsonSchemaViewer\\">
<div style=\\"margin-left: 20px\\">
<div>
<div>
<div>
<div>
Expand All @@ -263,7 +263,7 @@ describe('Expanded depth', () => {
expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
"<div class=\\"\\">
<div class=\\"JsonSchemaViewer\\">
<div style=\\"margin-left: 20px\\">
<div>
<div>
<div>
<div>
Expand Down Expand Up @@ -306,7 +306,7 @@ describe('Expanded depth', () => {
expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
"<div class=\\"\\">
<div class=\\"JsonSchemaViewer\\">
<div style=\\"margin-left: 20px\\">
<div>
<div>
<div>
<div>
Expand Down Expand Up @@ -401,7 +401,7 @@ describe('Expanded depth', () => {
expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
"<div class=\\"\\">
<div class=\\"JsonSchemaViewer\\">
<div style=\\"margin-left: 20px\\">
<div>
<div>
<div>
<div>
Expand All @@ -426,7 +426,7 @@ describe('Expanded depth', () => {
expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
"<div class=\\"\\">
<div class=\\"JsonSchemaViewer\\">
<div style=\\"margin-left: 20px\\">
<div>
<div>
<div>
<div>
Expand Down Expand Up @@ -485,7 +485,7 @@ describe('Expanded depth', () => {
expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
"<div class=\\"\\">
<div class=\\"JsonSchemaViewer\\">
<div style=\\"margin-left: 20px\\">
<div>
<div>
<div>
<div>
Expand Down Expand Up @@ -624,7 +624,7 @@ describe('Expanded depth', () => {
expect(dumpDom(wrapper.getElement())).toMatchInlineSnapshot(`
"<div class=\\"\\">
<div class=\\"JsonSchemaViewer\\">
<div style=\\"margin-left: 20px\\">
<div>
<div>
<div>
<div>
Expand Down Expand Up @@ -678,7 +678,7 @@ describe('$ref resolving', () => {
expect(dumpDom(<JsonSchemaViewer schema={schema} />)).toMatchInlineSnapshot(`
"<div class=\\"\\">
<div class=\\"JsonSchemaViewer\\">
<div style=\\"margin-left: 20px\\">
<div>
<div>
<div>
<div>
Expand Down Expand Up @@ -707,7 +707,7 @@ describe('$ref resolving', () => {
expect(dumpDom(<JsonSchemaViewer schema={schema} />)).toMatchInlineSnapshot(`
"<div class=\\"\\">
<div class=\\"JsonSchemaViewer\\">
<div style=\\"margin-left: 20px\\">
<div>
<div>
<div>
<div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/JsonSchemaViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ const JsonSchemaViewerComponent: React.FC<JsonSchemaProps & ErrorBoundaryForward
<ChildStack
childNodes={jsonSchemaTreeRoot.children}
currentNestingLevel={-1}
className={cn(className, 'JsonSchemaViewer', 'sl-mr-5')}
className={cn(className, 'JsonSchemaViewer')}
/>
</JSVOptionsContextProvider>
</MosaicProvider>
Expand Down
13 changes: 9 additions & 4 deletions src/components/SchemaRow/SchemaRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
isMirroredNode,
isReferenceNode,
isRegularNode,
isRootNode,
ReferenceNode,
SchemaNode,
SchemaNodeKind,
Expand Down Expand Up @@ -56,9 +57,13 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = ({ schemaNode,
const isBrokenRef = typeof refNode?.error === 'string';

const childNodes = React.useMemo(() => calculateChildrenToShow(typeToShow), [typeToShow]);

return (
<div className="sl-text-sm sl-relative" style={{ marginLeft: CARET_ICON_BOX_DIMENSION }}>
<div
className="sl-text-sm sl-relative"
style={{
...(schemaNode.parent && !isRootNode(schemaNode.parent) ? { marginLeft: CARET_ICON_BOX_DIMENSION } : null),
}}
>
<div className="sl-flex">
<div className="sl-min-w-0 sl-flex-grow">
<div
Expand All @@ -85,7 +90,7 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = ({ schemaNode,
/>
) : null}

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

{typeof description === 'string' && description.length > 0 && (
<div className="sl-flex sl-flex-1 sl-my-2 sl-py-px">
<div className="sl-flex sl-flex-1 sl-my-2 sl-text-base">
<Description value={description} />
</div>
)}
Expand Down
2 changes: 1 addition & 1 deletion src/components/shared/Caret.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export interface ICaret {

export const Caret: React.FunctionComponent<ICaret> = ({ style, size, isExpanded }) => (
<div
className="sl-flex sl-absolute sl-justify-center sl-p-1 sl-cursor-pointer sl-text-muted"
className="sl-flex sl-absolute sl-justify-center sl-items-center sl-p-1 sl-cursor-pointer sl-text-muted"
style={style}
role="button"
>
Expand Down
38 changes: 21 additions & 17 deletions src/components/shared/Validations.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { RegularNode } from '@stoplight/json-schema-tree';
import { Dictionary } from '@stoplight/types';
import cn from 'classnames';
import { capitalize, keys, omit, pick, pickBy, uniq } from 'lodash';
import * as React from 'react';

Expand Down Expand Up @@ -99,9 +100,7 @@ const NumberValidations = ({
{entries
.map(([key, value]) => numberValidationFormatters[key](value))
.map((value, i) => (
<span key={i} className="sl-mr-2 sl-px-1 sl-font-mono sl-border sl-rounded-lg">
{value}
</span>
<Value key={i} name={value} className="sl-mr-2" />
))}
</div>
);
Expand All @@ -127,30 +126,35 @@ const KeyValueValidation = ({ name, values }: { name: string; values: string[] }
<div className="sl-flex sl-flex-wrap sl-text-muted sl-my-2">
<span className="sl-text-light">{capitalize(name)}:</span>
{uniq(values).map(value => (
<span key={value} className="sl-ml-2 sl-px-1 sl-font-mono sl-border sl-rounded-lg">
{value}
</span>
<Value key={value} name={value} className="sl-ml-2" />
))}
</div>
);
};

const NameValidations = ({ validations }: { validations: Dictionary<unknown> }) => (
<>
{keys(validations)
.filter(key => validations[key])
.map(key => {
return (
<div className="sl-flex sl-flex-1 sl-my-2" key={key}>
<span className="sl-px-1 sl-text-muted sl-font-mono sl-border sl-rounded-lg sl-text-sm sl-capitalize">
{key}
</span>
</div>
);
})}
{keys(validations).length ? (
<div className="sl-flex sl-flex-wrap sl-my-2">
{keys(validations)
.filter(key => validations[key])
.map(key => (
<Value key={key} name={key} className="sl-mr-2 sl-text-muted sl-capitalize" />
))}
</div>
) : null}
</>
);

const Value = ({ name, className }: { name: string; className?: string }) => (
<span
className={cn('sl-px-1 sl-font-mono sl-border sl-rounded-lg', className)}
style={{ backgroundColor: '#EDF2F7' }}
>
{name}
</span>
);

export function validationCount(schemaNode: RegularNode) {
const validations = getValidationsFromSchema(schemaNode);
const validationKeys = keys(omit(validations, excludedValidations));
Expand Down
Loading