Skip to content

Commit d04205e

Browse files
fmvilasfmvilas
authored
feat: Remove schema tables and use a fluent layout (#122)
* feat: Remove schema tables and use a fluent layout * Refactor pattern property
1 parent 7d8c81a commit d04205e

File tree

3 files changed

+162
-84
lines changed

3 files changed

+162
-84
lines changed

‎library/src/containers/Schemas/Schema.tsx‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,14 @@ import React from 'react';
33
import { SchemaPropertiesComponent as SchemaProperties } from './SchemaProperties';
44
import { SchemaExampleComponent } from './SchemaExample';
55

6-
import { Table, Toggle } from '../../components';
6+
import { Toggle } from '../../components';
77
import { Schema } from '../../types';
88
import {
99
bemClasses,
1010
searchForNestedObject,
1111
removeSpecialChars,
1212
} from '../../helpers';
13-
import {
14-
SCHEMA_COLUMN_NAMES,
15-
ITEM_LABELS,
16-
CONTAINER_LABELS,
17-
} from '../../constants';
13+
import { ITEM_LABELS, CONTAINER_LABELS } from '../../constants';
1814

1915
interface Props {
2016
name: string;
@@ -70,14 +66,8 @@ export const SchemaComponent: React.FunctionComponent<Props> = ({
7066

7167
const content = (
7268
<>
73-
<div className={bemClasses.element(`${className}-table`)}>
74-
<Table
75-
header={{
76-
columns: SCHEMA_COLUMN_NAMES,
77-
}}
78-
>
79-
{renderSchemaProps(name, schema)}
80-
</Table>
69+
<div className={`${bemClasses.element(`${className}-table`)} p-4`}>
70+
{renderSchemaProps(name, schema)}
8171
<div className={bemClasses.element('additional-properties-notice')}>
8272
Additional properties are{' '}
8373
{schema.additionalProperties === false && 'NOT'} allowed.

‎library/src/containers/Schemas/SchemaProperties.tsx‎

Lines changed: 70 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -3,70 +3,14 @@ import merge from 'merge';
33

44
import { bemClasses } from '../../helpers';
55
import { TypeWithKey, Schema } from '../../types';
6-
import {
7-
Markdown,
8-
TableAccessor,
9-
TableRow,
10-
TreeSpace,
11-
TreeLeaf,
12-
} from '../../components';
6+
import { Markdown, TreeSpace, TreeLeaf } from '../../components';
137

148
type SchemaWithKey = TypeWithKey<string, Schema>;
159
interface SchemaElement {
1610
schema: SchemaWithKey;
1711
treeSpace: number;
1812
}
1913

20-
const schemaPropertiesAccessors: Array<TableAccessor<SchemaElement>> = [
21-
el => (
22-
<>
23-
{(() => {
24-
const treeSpaces = [];
25-
if (el.treeSpace) {
26-
for (let i = 0; i < el.treeSpace; i++) {
27-
treeSpaces.push(<TreeSpace key={i} />);
28-
}
29-
treeSpaces.push(<TreeLeaf key={el.treeSpace} />);
30-
}
31-
return treeSpaces;
32-
})()}
33-
{el.schema.key}
34-
</>
35-
),
36-
el => <span>{el.schema.content.title}</span>,
37-
el => (
38-
<span>
39-
{el.schema.content.type}
40-
{el.schema.content.anyOf ? ` ${el.schema.content.anyOf}` : ''}
41-
{el.schema.content.oneOf ? ` ${el.schema.content.oneOf}` : ''}
42-
{el.schema.content.items && el.schema.content.items.type
43-
? ` (${el.schema.content.items.type})`
44-
: ''}
45-
</span>
46-
),
47-
el => <span>{el.schema.content.format}</span>,
48-
el => <span>{el.schema.content.default}</span>,
49-
el => {
50-
const enumElements = getEnumHTMLElements(el.schema);
51-
return (
52-
<div>
53-
{el.schema.content.description && (
54-
<Markdown>{el.schema.content.description}</Markdown>
55-
)}
56-
{enumElements.length > 0 && <div>Enum: {enumElements}</div>}
57-
{el.schema.content.pattern && (
58-
<div>
59-
Must Match{' '}
60-
<span className={bemClasses.element(`pattern`)}>
61-
{el.schema.content.pattern}
62-
</span>
63-
</div>
64-
)}
65-
</div>
66-
);
67-
},
68-
];
69-
7014
const getEnumHTMLElements = (schema: SchemaWithKey): HTMLElement[] => {
7115
let enumElements: any[] = [];
7216
if (schema.content.enum && schema.content.enum.length) {
@@ -151,6 +95,39 @@ interface Props {
15195
description?: React.ReactNode;
15296
}
15397

98+
const renderPropertyName = (el: SchemaElement): React.ReactNode => (
99+
<>
100+
{(() => {
101+
const treeSpaces = [];
102+
if (el.treeSpace) {
103+
for (let i = 0; i < el.treeSpace; i++) {
104+
treeSpaces.push(<TreeSpace key={i} />);
105+
}
106+
treeSpaces.push(<TreeLeaf key={el.treeSpace} />);
107+
}
108+
return treeSpaces;
109+
})()}
110+
{el.schema.key}
111+
</>
112+
);
113+
114+
const renderPropertyDescription = (el: SchemaElement): React.ReactNode => {
115+
const enumElements = getEnumHTMLElements(el.schema);
116+
return (
117+
<div>
118+
{el.schema.content.description && (
119+
<Markdown>{el.schema.content.description}</Markdown>
120+
)}
121+
{enumElements.length > 0 && <div>Enum: {enumElements}</div>}
122+
{el.schema.content.default && (
123+
<div>
124+
Default: <span>{el.schema.content.default}</span>
125+
</div>
126+
)}
127+
</div>
128+
);
129+
};
130+
154131
export const SchemaPropertiesComponent: React.FunctionComponent<Props> = ({
155132
name,
156133
properties,
@@ -167,12 +144,45 @@ export const SchemaPropertiesComponent: React.FunctionComponent<Props> = ({
167144
};
168145

169146
return (
170-
<>
171-
<TableRow accessors={schemaPropertiesAccessors} element={element} />
147+
<div>
148+
<div className="flex py-2">
149+
<div className="flex-1">{renderPropertyName(element)}</div>
150+
<div className="flex-1">
151+
<span className="capitalize text-sm text-teal font-bold">
152+
{element.schema.content.type}
153+
{element.schema.content.anyOf
154+
? ` ${element.schema.content.anyOf}`
155+
: ''}
156+
{element.schema.content.oneOf
157+
? ` ${element.schema.content.oneOf}`
158+
: ''}
159+
{element.schema.content.items && element.schema.content.items.type
160+
? ` (${element.schema.content.items.type})`
161+
: ''}
162+
</span>
163+
{element.schema.content.format && (
164+
<span
165+
className="bg-yellow-dark font-bold no-underline text-black rounded lowercase ml-2"
166+
style={{ height: '20px', fontSize: '11px', padding: '3px' }}
167+
>
168+
{element.schema.content.format}
169+
</span>
170+
)}
171+
{element.schema.content.pattern && (
172+
<span
173+
className="bg-purple-dark font-bold no-underline text-white rounded normal-case ml-2"
174+
style={{ height: '20px', fontSize: '11px', padding: '3px' }}
175+
>
176+
must match {element.schema.content.pattern}
177+
</span>
178+
)}
179+
<div className="py-2">{renderPropertyDescription(element)}</div>
180+
</div>
181+
</div>
172182
{renderOf(space, alteredProperties.anyOf)}
173183
{renderOf(space, alteredProperties.oneOf)}
174184
{renderProperties(alteredProperties, space)}
175185
{renderItems(alteredProperties, space)}
176-
</>
186+
</div>
177187
);
178188
};

‎library/src/styles/fiori.css‎

Lines changed: 88 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,91 @@
1+
/*
2+
STYLES:
3+
- Tailwind Helpers
4+
- Fiori theme
5+
*/
6+
7+
/*
8+
These are some rules from Tailwind CSS.
9+
The purpose is to help with a future migration, where this file will
10+
probably be replaced by Tailwind CSS file.
11+
*/
12+
13+
.capitalize {
14+
text-transform: capitalize;
15+
}
16+
.text-sm {
17+
font-size: 0.875rem;
18+
}
19+
.text-teal {
20+
color: #4dc0b5;
21+
}
22+
.font-bold {
23+
font-weight: 700;
24+
}
25+
.px-2 {
26+
padding-left: 0.5rem;
27+
padding-right: 0.5rem;
28+
}
29+
.py-2 {
30+
padding-top: 0.5rem;
31+
padding-bottom: 0.5rem;
32+
}
33+
.p-2 {
34+
padding-top: 0.5rem;
35+
padding-bottom: 0.5rem;
36+
padding-left: 0.5rem;
37+
padding-right: 0.5rem;
38+
}
39+
.px-4 {
40+
padding-left: 1rem;
41+
padding-right: 1rem;
42+
}
43+
.py-4 {
44+
padding-top: 1rem;
45+
padding-bottom: 1rem;
46+
}
47+
.p-4 {
48+
padding-top: 1rem;
49+
padding-bottom: 1rem;
50+
padding-left: 1rem;
51+
padding-right: 1rem;
52+
}
53+
.flex {
54+
display: flex;
55+
}
56+
.flex-1 {
57+
flex: 1 1 0%;
58+
}
59+
.no-underline {
60+
text-decoration: none;
61+
}
62+
.lowercase {
63+
text-transform: lowercase;
64+
}
65+
.normal-case {
66+
text-transform: none;
67+
}
68+
.text-black {
69+
color: #22292f;
70+
}
71+
.text-white {
72+
color: #fff;
73+
}
74+
.ml-2 {
75+
margin-left: 0.5rem;
76+
}
77+
.rounded {
78+
border-radius: 0.25rem;
79+
}
80+
.bg-yellow-dark {
81+
background-color: #f2d024;
82+
}
83+
.bg-purple-dark {
84+
background-color: #794acf;
85+
}
86+
87+
/* CURRENT THEME BASED ON KYMA STYLES */
88+
189
.asyncapi {
290
font-family: '72';
391
font-size: 14px;
@@ -1256,16 +1344,6 @@
12561344
color: #f6993f;
12571345
}
12581346

1259-
.asyncapi__pattern {
1260-
line-height: 2;
1261-
background-color: #794acf;
1262-
font-weight: bold;
1263-
border-radius: 0.25rem;
1264-
margin-left: 0.25rem;
1265-
padding: 0 0.5rem;
1266-
color: #fff;
1267-
}
1268-
12691347
.asyncapi__additional-properties-notice {
12701348
text-align: center;
12711349
font-style: italic;

0 commit comments

Comments
 (0)