From dc37ec9295020bcd1a1ff0706c758a2af8c146fc Mon Sep 17 00:00:00 2001 From: Chris Date: Mon, 20 May 2019 17:25:56 -0500 Subject: [PATCH 1/4] fix: remove scss dep --- src/__fixtures__/default-schema.json | 5 +- src/__stories__/_styles.scss | 6 +- src/components/SchemaRow.tsx | 115 ++++++++++++--------------- src/components/Types.tsx | 4 +- src/styles/_json-schema-viewer.scss | 11 --- 5 files changed, 60 insertions(+), 81 deletions(-) delete mode 100644 src/styles/_json-schema-viewer.scss diff --git a/src/__fixtures__/default-schema.json b/src/__fixtures__/default-schema.json index 07b76863..013e62f4 100644 --- a/src/__fixtures__/default-schema.json +++ b/src/__fixtures__/default-schema.json @@ -4,7 +4,7 @@ "properties": { "name": { "type": "string", - "description": "The user's full name." + "description": "The user's full name. This description can be long and should truncate once it reaches the end of the row. If it's not truncating then theres and issue that needs to be fixed. Help!" }, "age": { "type": "number", @@ -19,7 +19,8 @@ "type": ["null", "array"], "items": { "type": ["string", "number"] - } + }, + "description": "This description can be long and should truncate once it reaches the end of the row. If it's not truncating then theres and issue that needs to be fixed. Help!" }, "email": { "type": "string", diff --git a/src/__stories__/_styles.scss b/src/__stories__/_styles.scss index daee8ae8..c5af64ad 100644 --- a/src/__stories__/_styles.scss +++ b/src/__stories__/_styles.scss @@ -1,4 +1,2 @@ -@import '../styles/json-schema-viewer'; - -@import '~@stoplight/tree-list/styles/_tree-list.scss'; -@import '~@stoplight/ui-kit/styles/_ui-kit.scss'; +@import "~@stoplight/tree-list/styles/_tree-list.scss"; +@import "~@stoplight/ui-kit/styles/_ui-kit.scss"; diff --git a/src/components/SchemaRow.tsx b/src/components/SchemaRow.tsx index 4a11c11e..0f8f0b02 100644 --- a/src/components/SchemaRow.tsx +++ b/src/components/SchemaRow.tsx @@ -39,19 +39,16 @@ export const SchemaRow: React.FunctionComponent = ({ node, treeStore const validationCount = Object.keys(nodeValidations).length; const requiredElem = ( - +
{required ? 'required' : 'optional'} {validationCount ? `+${validationCount}` : ''} - +
); return ( -
+
= ({ node, treeStore )} {schemaNode.divider && ( -
-
- {schemaNode.divider} -
+
+
{schemaNode.divider}
)} -
-
- {name && {name}} - - - {type === '$ref' ? `[${$ref}]` : null} - - - {node.canHaveChildren && ( - {`{${childrenCount}}`} - )} - - {'pattern' in schemaNode && schemaNode.pattern ? ( - (pattern property) - ) : null} - - {description && ( - {description}
} - content={ -
- -
- } - /> - )} -
+
+ {name &&
{name}
} + + + {type === '$ref' ? `[${$ref}]` : null} + + + {node.canHaveChildren &&
{`{${childrenCount}}`}
} + + {'pattern' in schemaNode && schemaNode.pattern ? ( +
(pattern property)
+ ) : null} + + {description && ( + {description}
} + targetClassName="text-darken-7 dark:text-lighten-6 w-full truncate" + content={ +
+ +
+ } + /> + )}
{validationCount ? ( @@ -124,35 +112,38 @@ export const SchemaRow: React.FunctionComponent = ({ node, treeStore boundary="window" interactionKind="hover" content={ -
+
{map(Object.keys(nodeValidations), (key, index) => { const validation = nodeValidations[key]; - let elem = []; + let elem = null; if (Array.isArray(validation)) { - elem = validation.map(v => ( - - {v} - + elem = validation.map((v, i) => ( +
+
+ {v} +
+ {i < validation.length - 1 ?
,
: null} +
)); } else if (typeof validation === 'object') { - elem = [ - + elem = ( +
{'{...}'} - , - ]; +
+ ); } else { - elem = [ - + elem = ( +
{JSON.stringify(validation)} - , - ]; +
+ ); } return ( -
- {key}: - {elem} +
+
{key}:
+
{elem}
); })} diff --git a/src/components/Types.tsx b/src/components/Types.tsx index c5119134..4b456150 100644 --- a/src/components/Types.tsx +++ b/src/components/Types.tsx @@ -16,7 +16,7 @@ export interface IType { export const Type: React.FunctionComponent = ({ className, children, type, subtype }) => { return ( - + {type === 'array' && subtype && subtype !== 'array' ? `array[${subtype}]` : type} {children} @@ -42,7 +42,7 @@ export const Types: React.FunctionComponent = ({ className, type, subtyp } return ( -
+
<> {type.map((name, i, { length }) => ( diff --git a/src/styles/_json-schema-viewer.scss b/src/styles/_json-schema-viewer.scss deleted file mode 100644 index cfae7e5c..00000000 --- a/src/styles/_json-schema-viewer.scss +++ /dev/null @@ -1,11 +0,0 @@ -@import '~@stoplight/ui-kit/styles/common/theme'; - -.JsonSchemaViewer { - .JSV--Popover { - overflow: hidden; - - .#{$ns}-popover-target { - display: block !important; - } - } -} From 177b5fe1de7d42965dd11ea0eb83447624bb912a Mon Sep 17 00:00:00 2001 From: Chris Date: Mon, 20 May 2019 17:28:01 -0500 Subject: [PATCH 2/4] fix: negative margin-left instead of absolute left --- src/components/SchemaRow.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/SchemaRow.tsx b/src/components/SchemaRow.tsx index 0f8f0b02..a485742f 100644 --- a/src/components/SchemaRow.tsx +++ b/src/components/SchemaRow.tsx @@ -72,8 +72,8 @@ export const SchemaRow: React.FunctionComponent = ({ node, treeStore )} {schemaNode.divider && ( -
-
{schemaNode.divider}
+
+
{schemaNode.divider}
)} From 6ac60b00e91c697a195673211e0b0bec515219ae Mon Sep 17 00:00:00 2001 From: Chris Date: Mon, 20 May 2019 17:31:15 -0500 Subject: [PATCH 3/4] fix: truncate pattern props too --- src/components/SchemaRow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SchemaRow.tsx b/src/components/SchemaRow.tsx index a485742f..19767343 100644 --- a/src/components/SchemaRow.tsx +++ b/src/components/SchemaRow.tsx @@ -88,7 +88,7 @@ export const SchemaRow: React.FunctionComponent = ({ node, treeStore {node.canHaveChildren &&
{`{${childrenCount}}`}
} {'pattern' in schemaNode && schemaNode.pattern ? ( -
(pattern property)
+
(pattern property)
) : null} {description && ( From 9b62d28e13aab88dc6aa042c01f633cb4bfbda8d Mon Sep 17 00:00:00 2001 From: Chris Date: Mon, 20 May 2019 17:46:32 -0500 Subject: [PATCH 4/4] test: update snapshots --- .../__tests__/__snapshots__/renderSchema.spec.ts.snap | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/utils/__tests__/__snapshots__/renderSchema.spec.ts.snap b/src/utils/__tests__/__snapshots__/renderSchema.spec.ts.snap index 557f886d..fc13cc82 100644 --- a/src/utils/__tests__/__snapshots__/renderSchema.spec.ts.snap +++ b/src/utils/__tests__/__snapshots__/renderSchema.spec.ts.snap @@ -374,6 +374,7 @@ Array [ "type": "string", }, "items": Object { + "description": "This description can be long and should truncate once it reaches the end of the row. If it's not truncating then theres and issue that needs to be fixed. Help!", "items": Object { "type": Array [ "string", @@ -386,7 +387,7 @@ Array [ ], }, "name": Object { - "description": "The user's full name.", + "description": "The user's full name. This description can be long and should truncate once it reaches the end of the row. If it's not truncating then theres and issue that needs to be fixed. Help!", "type": "string", }, "permissions": Object { @@ -442,7 +443,7 @@ Array [ "level": 1, "metadata": Object { "annotations": Object { - "description": "The user's full name.", + "description": "The user's full name. This description can be long and should truncate once it reaches the end of the row. If it's not truncating then theres and issue that needs to be fixed. Help!", }, "enum": undefined, "id": "random-id", @@ -503,7 +504,9 @@ Array [ "level": 1, "metadata": Object { "additionalItems": undefined, - "annotations": Object {}, + "annotations": Object { + "description": "This description can be long and should truncate once it reaches the end of the row. If it's not truncating then theres and issue that needs to be fixed. Help!", + }, "enum": undefined, "id": "random-id", "items": undefined,