Skip to content

Commit b965359

Browse files
diptitiwari2917diptitiwari2917
authored
JSON Editor for Typed json (#734)
* changes for the new and antd components refactor * Added CountDown and Statistics antd component * fix: removed comments and linting * fix: removed console and linting issues * JSON Editor Functionality and implemented in Tree * WIP: Type changes * Types changes and new components (Badge, Cascadar, Unorderedlist)
1 parent 31159e7 commit b965359

File tree

18 files changed

+980
-432
lines changed

18 files changed

+980
-432
lines changed

‎packages/app-design-forest/src/customPropsTree.ts‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
import Joi from "joi";
2+
const JoiTypes = Joi.types();
3+
type JoiSchema<K = keyof typeof JoiTypes> = K extends keyof typeof JoiTypes
4+
? typeof JoiTypes[K]
5+
: never;
6+
17
export type SimpleCustomProp = {
28
type:
39
| "text"
@@ -38,6 +44,11 @@ export type ArrayMapCustomProp = {
3844
attributes: MapCustomProp["attributes"];
3945
};
4046

47+
export type JSONCustomProp = {
48+
type: "json";
49+
schema: JoiSchema;
50+
};
51+
4152
/**
4253
* This type represents a custom field that takes an object as a value.
4354
* This object does not have fixed keys unlike MapCustomProp.
@@ -57,6 +68,7 @@ export type TypedMapCustomProp = {
5768
| ArrayEnumCustomProp
5869
| MapCustomProp
5970
| ArrayMapCustomProp
71+
| JSONCustomProp
6072
))[];
6173
selectedOption?: string;
6274
};
@@ -77,7 +89,8 @@ export type CustomPropsTreeOptions = {
7789
| ArrayMapCustomProp
7890
| VariableKeyMapCustomProp
7991
| TypedMapCustomProp
80-
| ArrayTypedMapCustomProp;
92+
| ArrayTypedMapCustomProp
93+
| JSONCustomProp;
8194
};
8295
};
8396

‎packages/custom-props-layer/package.json‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,21 @@
2727
"@atrilabs/layer-types": "^1.0.0-alpha.8",
2828
"@atrilabs/react-component-manifest-schema": "^1.0.0-alpha.8",
2929
"@atrilabs/shared-layer-lib": "^1.0.0-alpha.8",
30+
"@codemirror/lang-json": "^6.0.1",
31+
"@codemirror/language": "^6.6.0",
32+
"@codemirror/legacy-modes": "^6.3.1",
33+
"@codemirror/lint": "^6.0.0",
34+
"@uiw/react-codemirror": "^4.19.9",
3035
"eslint-plugin-atrilabs": "^1.0.0-alpha.8",
31-
"typescript": "4.6.3"
36+
"joi": "^17.8.4",
37+
"typescript": "4.6.3",
38+
"url": "^0.11.0"
3239
},
3340
"devDependencies": {
3441
"@babel/core": "^7.17.9",
3542
"@babel/plugin-syntax-flow": "^7.16.7",
3643
"@babel/plugin-transform-react-jsx": "^7.17.3",
44+
"@types/joi": "^17.2.3",
3745
"@types/react": "18.0.5",
3846
"@typescript-eslint/eslint-plugin": "^5.19.0",
3947
"@typescript-eslint/parser": "^5.19.0",

‎packages/custom-props-layer/src/components/commons/CommonPropTypeContainer.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { ExternalLink } from "../external-link/ExternalLink";
1818
import { EnumCustomProp } from "@atrilabs/app-design-forest";
1919
import { Enum } from "../enum/Enum";
2020
import { EnumList } from "../enum-list/EnumList";
21+
import { TypedJson } from "../typed-json/TypedJson";
2122

2223
export const CommonPropTypeContainer: React.FC<CommonPropTypeContainerTypes> = (
2324
props
@@ -168,5 +169,14 @@ export const CommonPropTypeContainer: React.FC<CommonPropTypeContainerTypes> = (
168169
/>
169170
);
170171
}
172+
if (propType === "json")
173+
return (
174+
<TypedJson
175+
{...props}
176+
propName={propName}
177+
key={propName}
178+
routes={routes}
179+
/>
180+
);
171181
return <React.Fragment key={propName}></React.Fragment>;
172182
};

‎packages/custom-props-layer/src/components/commons/Modal.tsx‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
function Modal(props: any) {
2+
return (
3+
<>
4+
<style>
5+
{` .modal-content {
6+
position: relative;
7+
background-color: #fefefe;
8+
margin: auto;
9+
padding: 0;
10+
border: 1px solid #888;
11+
width: 80%;
12+
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
13+
animation-name: animatetop;
14+
animation-duration: 0.4s;
15+
display: flex;
16+
flex-direction: column;
17+
justify-content: space-between;
18+
}
19+
.modal-footer {
20+
padding: 2px 16px;
21+
background-color: #5cb85c;
22+
color: white;
23+
}
24+
.modal-body {padding: 2px 16px;}
25+
.modal-header {
26+
padding: 2px 16px;
27+
background-color: #5cb85c;
28+
color: white;
29+
}
30+
.close {
31+
color: #aaa;
32+
float: right;
33+
font-size: 28px;
34+
font-weight: bold;
35+
}
36+
37+
.close:hover,
38+
.close:focus {
39+
color: black;
40+
text-decoration: none;
41+
cursor: pointer;
42+
}
43+
body:after {
44+
position: absolute;
45+
content: '';
46+
left: 0;
47+
top: 0;
48+
height: 100vh;
49+
width: 100vw;
50+
background: rgba(0,0,0,0.5);
51+
/* visibility: hidden; */
52+
z-index: 0;
53+
}
54+
body:after {
55+
position: absolute;
56+
content: '';
57+
left: 0;
58+
top: 0;
59+
height: 100vh;
60+
width: 100vw;
61+
background: rgba(0,0,0,0.5);
62+
z-index: 0;
63+
}
64+
65+
.modal-content{
66+
position:fixed !important;
67+
top:50%;
68+
left:50%;
69+
transform: translate(-50%, -50%);
70+
z-index: 1;
71+
width:800px;
72+
height:800px;
73+
border-radius: 5px;
74+
box-sizing: border-box;
75+
76+
}
77+
.modal-header{
78+
background-color: transparent;
79+
padding: 16px;
80+
display: flex;
81+
align-items: center;
82+
justify-content: space-between;
83+
border-bottom:1px solid #dee2e6;
84+
}
85+
.modal-footer{
86+
background-color: transparent;
87+
padding-top: 16px;
88+
border-top: 1px solid #dee2e6 ;
89+
padding:16px;
90+
display:flex;
91+
gap:10px;
92+
justify-content:end;
93+
}
94+
.modal-header h2{
95+
color: black;
96+
margin: 0;
97+
font-size:20px;
98+
font-weight:500;
99+
}
100+
.modal-body{
101+
padding: 0px;
102+
}
103+
.modal-content .modal-body .cm-theme-light{
104+
height: 660px;
105+
overflow-y: scroll;
106+
}
107+
.modal-content .error .cm-theme-light {
108+
height: 620px ! important;
109+
overflow-y: scroll;
110+
}
111+
.modal-footer .disabled{
112+
background-color:#efefef !important;
113+
cursor: not-allowed;
114+
color: gray !important;
115+
border: none;
116+
height: 38px;
117+
border-radius: 5px;
118+
font-size: 16px;
119+
}
120+
.modal-footer button:first-child{
121+
background: #007bff;
122+
color: #ffffff;
123+
border: none;
124+
height: 38px;
125+
border-radius: 5px;
126+
font-size: 16px;
127+
}
128+
.modal-footer button:last-child{
129+
background: #6c757d;
130+
color: #ffffff;
131+
border: none;
132+
width: 75px;
133+
height: 38px;
134+
border-radius: 5px;
135+
font-size: 16px;
136+
}
137+
`}
138+
</style>
139+
140+
{props.showModal && (
141+
<div className="modal-content">
142+
<div className="modal-header">
143+
<h2>{props.title}</h2>
144+
<span className="close" onClick={() => props.setShowModal(false)}>
145+
&times;
146+
</span>
147+
</div>
148+
<div className="modal-body" >{props.children}</div>
149+
<div className="modal-footer">
150+
{props.footer}
151+
</div>
152+
</div>
153+
)}
154+
</>
155+
);
156+
}
157+
158+
export default Modal;

0 commit comments

Comments
 (0)