Skip to content

Commit 92fcfd6

Browse files
mychidarkomychidarko
committed
feat: update creation flows for different systems
1 parent 2928755 commit 92fcfd6

File tree

2 files changed

+157
-87
lines changed

2 files changed

+157
-87
lines changed

‎src/ui/src/pages/Create/AdditionalFrontendOptionsScreen.tsx‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,15 @@ const AdditionalFrontendOptionsScreen: React.FC<
2020
</div>
2121

2222
<div className="mt-6 py-2 px-5 lg:px-10">
23-
{additionalFrontendOptions.map(
24-
({ icon, key, name, description }) => (
23+
{additionalFrontendOptions
24+
.filter(({ key }) => {
25+
if (values.type === 'mvc') {
26+
return key !== 'vite';
27+
}
28+
29+
return true;
30+
})
31+
.map(({ icon, key, name, description }) => (
2532
<Card
2633
key={key}
2734
className={`w-100 max-w-none items-start mb-5 ${
@@ -61,11 +68,12 @@ const AdditionalFrontendOptionsScreen: React.FC<
6168
{description}
6269
</p>
6370
</Card>
64-
)
65-
)}
71+
))}
6672
<button
6773
className="mt-20 bg-green-800 px-5 py-2 rounded-md text-white"
68-
onClick={() => navigate('modules')}
74+
onClick={() =>
75+
navigate(values.type === 'leaf' ? 'modules' : 'testing')
76+
}
6977
>
7078
Next
7179
</button>

‎src/ui/src/pages/Create/ReviewScreen.tsx‎

Lines changed: 144 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,16 @@ const ReviewScreen: React.FC<React.PropsWithChildren<CreateSubScreenProps>> = ({
4040
name: values?.name?.trim().replace(/\s+/g, '-').toLowerCase(),
4141
};
4242

43+
if (
44+
formData.frontendFramework ||
45+
formData.additionalFrontendOptions?.includes('tailwind')
46+
) {
47+
formData.additionalFrontendOptions =
48+
formData.additionalFrontendOptions?.filter(
49+
(option) => option !== 'vite'
50+
);
51+
}
52+
4353
fetch('http://localhost:5500/server.php?action=createApp', {
4454
method: 'POST',
4555
body: JSON.stringify({
@@ -101,122 +111,174 @@ const ReviewScreen: React.FC<React.PropsWithChildren<CreateSubScreenProps>> = ({
101111
)}
102112
</div>
103113

104-
<div className="mt-6 py-2 px-5 lg:px-10">
105-
<h2 className="font-bold mb-2">Your template engine</h2>
106-
{templateEngine && (
107-
<Card
108-
key={templateEngine.key}
109-
className="w-100 max-w-none items-start"
110-
onClick={() => {
111-
navigate('templateEngine');
112-
}}
113-
>
114-
<h3 className="font-bold mb-1 flex items-center gap-1">
115-
{templateEngine.icon} {templateEngine.name}
116-
</h3>
117-
<p className="dark:text-gray-400 text-gray-600">
118-
{templateEngine.description}
119-
</p>
120-
</Card>
121-
)}
122-
</div>
114+
{values.type !== 'api' && (
115+
<>
116+
<div className="mt-6 py-2 px-5 lg:px-10">
117+
<h2 className="font-bold mb-2">Your template engine</h2>
118+
{templateEngine && (
119+
<Card
120+
key={templateEngine.key}
121+
className="w-100 max-w-none items-start"
122+
onClick={() => {
123+
navigate('templateEngine');
124+
}}
125+
>
126+
<h3 className="font-bold mb-1 flex items-center gap-1">
127+
{templateEngine.icon} {templateEngine.name}
128+
</h3>
129+
<p className="dark:text-gray-400 text-gray-600">
130+
{templateEngine.description}
131+
</p>
132+
</Card>
133+
)}
134+
</div>
123135

124-
<div className="mt-6 py-2 px-5 lg:px-10">
125-
<h2 className="font-bold mb-2">Your frontend framework</h2>
126-
{frontendFramework && (
127-
<Card
128-
key={frontendFramework.key}
129-
className="w-100 max-w-none items-start"
130-
onClick={() => {
131-
navigate('frontendFramework');
132-
}}
133-
>
134-
<h3 className="font-bold mb-1 flex items-center gap-1">
135-
{frontendFramework.icon} {frontendFramework.name}
136-
</h3>
137-
<p className="dark:text-gray-400 text-gray-600">
138-
{frontendFramework.description}
139-
</p>
140-
</Card>
141-
)}
142-
</div>
136+
{values.frontendFramework && (
137+
<div className="mt-6 py-2 px-5 lg:px-10">
138+
<h2 className="font-bold mb-2">
139+
Your frontend framework
140+
</h2>
141+
{frontendFramework && (
142+
<Card
143+
key={frontendFramework.key}
144+
className="w-100 max-w-none items-start"
145+
onClick={() => {
146+
navigate('frontendFramework');
147+
}}
148+
>
149+
<h3 className="font-bold mb-1 flex items-center gap-1">
150+
{frontendFramework.icon}{' '}
151+
{frontendFramework.name}
152+
</h3>
153+
<p className="dark:text-gray-400 text-gray-600">
154+
{frontendFramework.description}
155+
</p>
156+
</Card>
157+
)}
158+
</div>
159+
)}
143160

144-
<div className="mt-6 py-2 px-5 lg:px-10">
145-
<h2 className="font-bold mb-2">Additional Frontend Options</h2>
146-
{values.additionalFrontendOptions?.map((option) => {
147-
const item = additionalFrontendOptions.find(
148-
(o) => o.key === option
149-
);
161+
{(values.additionalFrontendOptions?.length ?? 0) > 0 && (
162+
<div className="mt-6 py-2 px-5 lg:px-10">
163+
<h2 className="font-bold mb-2">
164+
Additional Frontend Options
165+
</h2>
166+
{values.additionalFrontendOptions?.map((option) => {
167+
const item = additionalFrontendOptions.find(
168+
(o) => o.key === option
169+
);
170+
171+
return item ? (
172+
<Card
173+
key={item.key}
174+
className="w-100 max-w-none items-start mb-2"
175+
onClick={() => {
176+
navigate(
177+
'additionalFrontendOptions'
178+
);
179+
}}
180+
>
181+
<h3 className="font-bold mb-1 flex items-center gap-1">
182+
{item.icon} {item.name}
183+
</h3>
184+
<p className="dark:text-gray-400 text-gray-600">
185+
{item.description}
186+
</p>
187+
</Card>
188+
) : (
189+
<></>
190+
);
191+
})}
192+
</div>
193+
)}
150194

151-
return item ? (
195+
{values.type === 'leaf' && values.modules && (
196+
<div className="mt-6 py-2 px-5 lg:px-10">
197+
<h2 className="font-bold mb-2">Selected Modules</h2>
198+
{values.modules?.map((option) => {
199+
const item = modules.find(
200+
(o) => o.key === option
201+
);
202+
203+
return item ? (
204+
<Card
205+
key={item.key}
206+
className="w-100 max-w-none items-start mb-2"
207+
onClick={() => {
208+
navigate('modules');
209+
}}
210+
>
211+
<h3 className="font-bold mb-1 flex items-center gap-1">
212+
{item.name}
213+
</h3>
214+
<p className="dark:text-gray-400 text-gray-600">
215+
{item.description}
216+
</p>
217+
</Card>
218+
) : (
219+
<></>
220+
);
221+
})}
222+
</div>
223+
)}
224+
</>
225+
)}
226+
227+
{values.testing && (
228+
<div className="mt-6 py-2 px-5 lg:px-10">
229+
<h2 className="font-bold mb-2">Your testing framework</h2>
230+
{testingFramework ? (
152231
<Card
153-
key={item.key}
154-
className="w-100 max-w-none items-start mb-2"
232+
key={testingFramework.key}
233+
className="w-100 max-w-none items-start"
155234
onClick={() => {
156-
navigate('additionalFrontendOptions');
235+
navigate('testing');
157236
}}
158237
>
159238
<h3 className="font-bold mb-1 flex items-center gap-1">
160-
{item.icon} {item.name}
239+
{testingFramework.icon} {testingFramework.name}
161240
</h3>
162241
<p className="dark:text-gray-400 text-gray-600">
163-
{item.description}
242+
{testingFramework.description}
164243
</p>
165244
</Card>
166245
) : (
167-
<></>
168-
);
169-
})}
170-
</div>
171-
172-
<div className="mt-6 py-2 px-5 lg:px-10">
173-
<h2 className="font-bold mb-2">Selected Modules</h2>
174-
{values.modules?.map((option) => {
175-
const item = modules.find((o) => o.key === option);
176-
177-
return item ? (
178246
<Card
179-
key={item.key}
180-
className="w-100 max-w-none items-start mb-2"
247+
key="none"
248+
className="w-100 max-w-none items-start"
181249
onClick={() => {
182-
navigate('modules');
250+
navigate('testing');
183251
}}
184252
>
185253
<h3 className="font-bold mb-1 flex items-center gap-1">
186-
{item.name}
254+
None
187255
</h3>
188256
<p className="dark:text-gray-400 text-gray-600">
189-
{item.description}
257+
You can always add a testing framework later.
190258
</p>
191259
</Card>
192-
) : (
193-
<></>
194-
);
195-
})}
196-
</div>
260+
)}
261+
</div>
262+
)}
197263

198-
<div className="mt-6 py-2 px-5 lg:px-10">
199-
<h2 className="font-bold mb-2">Your testing framework</h2>
200-
{testingFramework && (
264+
<div className="mt-6 pt-2 pb-12 px-5 lg:px-10">
265+
<h2 className="font-bold mb-2">Selected container solution</h2>
266+
{!values.docker && (
201267
<Card
202-
key={testingFramework.key}
268+
key="none"
203269
className="w-100 max-w-none items-start"
204270
onClick={() => {
205-
navigate('testing');
271+
navigate('docker');
206272
}}
207273
>
208274
<h3 className="font-bold mb-1 flex items-center gap-1">
209-
{testingFramework.icon} {testingFramework.name}
275+
None
210276
</h3>
211277
<p className="dark:text-gray-400 text-gray-600">
212-
{testingFramework.description}
278+
You can always add a container solution later.
213279
</p>
214280
</Card>
215281
)}
216-
</div>
217-
218-
<div className="mt-6 pt-2 pb-12 px-5 lg:px-10">
219-
<h2 className="font-bold mb-2">Selected container solution</h2>
220282
{containers
221283
?.filter((theme) => theme.key === 'docker' && values.docker)
222284
.map(({ icon, key, name, description }) => (

0 commit comments

Comments
 (0)