@salla.sa/twilight-bundles-starter-kit 0.1.4 → 0.1.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +35 -4
- package/dist/getting-started-guide.js +396 -0
- package/package.json +3 -5
- package/src/components/getting-started-guide/index.ts +390 -0
- package/src/types/salla.d.ts +1 -3
- package/twilight-bundle.json +7 -0
package/README.md
CHANGED
|
@@ -5,10 +5,13 @@ This starter kit provides a foundation for building custom Twilight components f
|
|
|
5
5
|
## Getting Started
|
|
6
6
|
|
|
7
7
|
1. Clone this repository
|
|
8
|
-
2. Remove the example components in `src/components/`
|
|
8
|
+
2. Remove the example components in `src/components/` using:
|
|
9
|
+
```
|
|
10
|
+
tw-delete-component
|
|
11
|
+
```
|
|
9
12
|
3. Create your own components using the component generator:
|
|
10
13
|
```
|
|
11
|
-
|
|
14
|
+
tw-create-component <component-name>
|
|
12
15
|
```
|
|
13
16
|
4. Run `pnpm install` to install dependencies
|
|
14
17
|
5. Run `pnpm run dev` to start the development server
|
|
@@ -129,12 +132,20 @@ export default defineConfig({
|
|
|
129
132
|
});
|
|
130
133
|
```
|
|
131
134
|
|
|
132
|
-
##
|
|
135
|
+
## Component Management
|
|
136
|
+
|
|
137
|
+
### Creating New Components
|
|
133
138
|
|
|
134
139
|
This starter kit includes a component generator to help you create new components quickly. To use it, run:
|
|
135
140
|
|
|
136
141
|
```bash
|
|
137
|
-
|
|
142
|
+
tw-create-component <component-name>
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
Or run without arguments for interactive mode:
|
|
146
|
+
|
|
147
|
+
```bash
|
|
148
|
+
tw-create-component
|
|
138
149
|
```
|
|
139
150
|
|
|
140
151
|
The generator will:
|
|
@@ -143,6 +154,26 @@ The generator will:
|
|
|
143
154
|
3. Create a new component folder with an `index.ts` file
|
|
144
155
|
4. Add the component definition to `twilight-bundle.json`
|
|
145
156
|
|
|
157
|
+
### Deleting Components
|
|
158
|
+
|
|
159
|
+
To remove a component, use:
|
|
160
|
+
|
|
161
|
+
```bash
|
|
162
|
+
tw-delete-component <component-name>
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
Or run without arguments to see a list of available components:
|
|
166
|
+
|
|
167
|
+
```bash
|
|
168
|
+
tw-delete-component
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
This will:
|
|
172
|
+
1. Show a list of available components to select from
|
|
173
|
+
2. Ask for confirmation before deletion
|
|
174
|
+
3. Remove the component folder from `src/components/`
|
|
175
|
+
4. Remove the component definition from `twilight-bundle.json`
|
|
176
|
+
|
|
146
177
|
## Component Requirements
|
|
147
178
|
|
|
148
179
|
Each component should:
|
|
@@ -0,0 +1,396 @@
|
|
|
1
|
+
import { LitElement as c, css as d, html as m } from "lit";
|
|
2
|
+
import { property as p } from "lit/decorators.js";
|
|
3
|
+
var g = Object.defineProperty, u = (r, e, t, o) => {
|
|
4
|
+
for (var s = void 0, n = r.length - 1, l; n >= 0; n--)
|
|
5
|
+
(l = r[n]) && (s = l(e, t, s) || s);
|
|
6
|
+
return s && g(e, t, s), s;
|
|
7
|
+
};
|
|
8
|
+
const a = class a extends c {
|
|
9
|
+
constructor() {
|
|
10
|
+
super(...arguments), this.isRtl = !1;
|
|
11
|
+
}
|
|
12
|
+
connectedCallback() {
|
|
13
|
+
super.connectedCallback(), this.isRtl = Salla.config.get("theme.is_rtl", !0), Salla.lang.addBulk({
|
|
14
|
+
"blocks.guide.title": { ar: "مرحباً بك في Twilight Bundles!", en: "Welcome to Twilight Bundles!" },
|
|
15
|
+
"blocks.guide.subtitle": { ar: "رحلتك لبناء مكونات Salla المذهلة تبدأ من هنا", en: "Your journey to building amazing Salla components starts here" },
|
|
16
|
+
"blocks.guide.dev_commands": { ar: "أوامر التطوير", en: "Development Commands" },
|
|
17
|
+
"blocks.guide.dev_start": { ar: "تشغيل خادم التطوير مع إعادة التحميل التلقائي", en: "Start development server with hot reload" },
|
|
18
|
+
"blocks.guide.build": { ar: "بناء الحزم للإنتاج", en: "Build bundles for production" },
|
|
19
|
+
"blocks.guide.create_component": { ar: "إنشاء مكون جديد", en: "Create a new component" },
|
|
20
|
+
"blocks.guide.delete_component": { ar: "حذف مكون موجود", en: "Delete an existing component" },
|
|
21
|
+
"blocks.guide.shortcuts": { ar: "اختصارات لوحة المفاتيح (في وضع التطوير)", en: "Keyboard Shortcuts (in dev mode)" },
|
|
22
|
+
"blocks.guide.quit": { ar: "إيقاف الخادم بأمان", en: "Quit the dev server safely" },
|
|
23
|
+
"blocks.guide.restart": { ar: "إعادة تشغيل الخادم", en: "Restart the dev server" },
|
|
24
|
+
"blocks.guide.open_browser": { ar: "فتح في المتصفح", en: "Open in browser" },
|
|
25
|
+
"blocks.guide.force_stop": { ar: "إيقاف قسري لخادم التطوير", en: "Force stop the development server" },
|
|
26
|
+
"blocks.guide.project_structure": { ar: "هيكل المشروع", en: "Project Structure" },
|
|
27
|
+
"blocks.guide.components_folder": { ar: "مكونات الحزمة موجودة هنا", en: "Your bundle components live here" },
|
|
28
|
+
"blocks.guide.example_components": { ar: "المكونات الموجودة هي أمثلة فقط - يمكنك حذفها يدوياً أو باستخدام tw-delete-component", en: "Existing components are examples - remove them manually or use tw-delete-component" },
|
|
29
|
+
"blocks.guide.bundle_config": { ar: "إعدادات الحزمة ومخططات المكونات", en: "Bundle configuration and component schemas" },
|
|
30
|
+
"blocks.guide.build_config": { ar: "إعدادات البناء", en: "Build configuration" },
|
|
31
|
+
"blocks.guide.readme": { ar: "نظرة عامة على المشروع والتوثيق", en: "Project overview and documentation" },
|
|
32
|
+
"blocks.guide.pro_tips": { ar: "نصائح احترافية", en: "Pro Tips" },
|
|
33
|
+
"blocks.guide.tip_hot_reload": { ar: "عدّل الملفات في src/ لرؤية التغييرات فوراً مع إعادة التحميل التلقائي", en: "Edit files in src/ to see changes instantly with hot reload" },
|
|
34
|
+
"blocks.guide.tip_typescript": { ar: "استخدم TypeScript للحصول على أمان أفضل للأنواع ودعم IDE", en: "Use TypeScript for better type safety and IDE support" },
|
|
35
|
+
"blocks.guide.tip_config": { ar: "راجع twilight-bundle.json لتكوين حقول المكونات والإعدادات", en: "Check twilight-bundle.json to configure component fields and settings" },
|
|
36
|
+
"blocks.guide.tip_folder": { ar: "يجب أن يكون كل مكون في مجلد خاص به مع ملف index.ts", en: "Each component should be in its own folder with an index.ts file" },
|
|
37
|
+
"blocks.guide.tip_lit": { ar: "استخدم Lit لبناء مكونات الويب مع الخصائص التفاعلية", en: "Use Lit for building web components with reactive properties" },
|
|
38
|
+
"blocks.guide.footer": { ar: "برمجة سعيدة! ابنِ شيئاً مذهلاً!", en: "Happy Coding! Build something amazing!" }
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
render() {
|
|
42
|
+
const e = (o) => typeof Salla < "u" ? Salla.lang.get(o) : o, t = this.isRtl ? "rtl" : "ltr";
|
|
43
|
+
return m`
|
|
44
|
+
<div class="guide-container ${t}">
|
|
45
|
+
<div class="guide-header">
|
|
46
|
+
<h1 class="guide-title">🚀 ${e("blocks.guide.title")}</h1>
|
|
47
|
+
<p class="guide-subtitle">${e("blocks.guide.subtitle")}</p>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<div class="sections-grid">
|
|
51
|
+
<div class="section">
|
|
52
|
+
<h2 class="section-title">
|
|
53
|
+
<span class="section-icon">🔧</span>
|
|
54
|
+
${e("blocks.guide.dev_commands")}
|
|
55
|
+
</h2>
|
|
56
|
+
<ul class="command-list">
|
|
57
|
+
<li class="command-item ${t}">
|
|
58
|
+
<span class="command-code">pnpm dev</span>
|
|
59
|
+
<span class="command-separator"> - </span>
|
|
60
|
+
<span class="command-description">${e("blocks.guide.dev_start")}</span>
|
|
61
|
+
</li>
|
|
62
|
+
<li class="command-item ${t}">
|
|
63
|
+
<span class="command-code">pnpm build</span>
|
|
64
|
+
<span class="command-separator"> - </span>
|
|
65
|
+
<span class="command-description">${e("blocks.guide.build")}</span>
|
|
66
|
+
</li>
|
|
67
|
+
<li class="command-item ${t}">
|
|
68
|
+
<span class="command-code">tw-create-component</span>
|
|
69
|
+
<span class="command-separator"> - </span>
|
|
70
|
+
<span class="command-description">${e("blocks.guide.create_component")}</span>
|
|
71
|
+
</li>
|
|
72
|
+
<li class="command-item ${t}">
|
|
73
|
+
<span class="command-code">tw-delete-component</span>
|
|
74
|
+
<span class="command-separator"> - </span>
|
|
75
|
+
<span class="command-description">${e("blocks.guide.delete_component")}</span>
|
|
76
|
+
</li>
|
|
77
|
+
</ul>
|
|
78
|
+
</div>
|
|
79
|
+
|
|
80
|
+
<div class="section">
|
|
81
|
+
<h2 class="section-title">
|
|
82
|
+
<span class="section-icon">⌨️</span>
|
|
83
|
+
${e("blocks.guide.shortcuts")}
|
|
84
|
+
</h2>
|
|
85
|
+
<ul class="shortcut-list">
|
|
86
|
+
<li class="shortcut-item ${t}">
|
|
87
|
+
<span class="shortcut-key">q + Enter</span>
|
|
88
|
+
<span>${e("blocks.guide.quit")}</span>
|
|
89
|
+
</li>
|
|
90
|
+
<li class="shortcut-item ${t}">
|
|
91
|
+
<span class="shortcut-key">r + Enter</span>
|
|
92
|
+
<span>${e("blocks.guide.restart")}</span>
|
|
93
|
+
</li>
|
|
94
|
+
<li class="shortcut-item ${t}">
|
|
95
|
+
<span class="shortcut-key">o + Enter</span>
|
|
96
|
+
<span>${e("blocks.guide.open_browser")}</span>
|
|
97
|
+
</li>
|
|
98
|
+
<li class="shortcut-item ${t}">
|
|
99
|
+
<span class="shortcut-key">Ctrl+C</span>
|
|
100
|
+
<span>${e("blocks.guide.force_stop")}</span>
|
|
101
|
+
</li>
|
|
102
|
+
</ul>
|
|
103
|
+
</div>
|
|
104
|
+
|
|
105
|
+
<div class="section">
|
|
106
|
+
<h2 class="section-title">
|
|
107
|
+
<span class="section-icon">📚</span>
|
|
108
|
+
${e("blocks.guide.project_structure")}
|
|
109
|
+
</h2>
|
|
110
|
+
<ul class="tip-list">
|
|
111
|
+
<li class="tip-item ${t}">
|
|
112
|
+
<strong>src/components/</strong> - ${e("blocks.guide.components_folder")}
|
|
113
|
+
</li>
|
|
114
|
+
<li class="tip-item ${t}" style="opacity: 0.85; font-size: 0.85rem;">
|
|
115
|
+
💡 ${e("blocks.guide.example_components")}
|
|
116
|
+
</li>
|
|
117
|
+
<li class="tip-item ${t}">
|
|
118
|
+
<strong>twilight-bundle.json</strong> - ${e("blocks.guide.bundle_config")}
|
|
119
|
+
</li>
|
|
120
|
+
<li class="tip-item ${t}">
|
|
121
|
+
<strong>vite.config.ts</strong> - ${e("blocks.guide.build_config")}
|
|
122
|
+
</li>
|
|
123
|
+
<li class="tip-item ${t}">
|
|
124
|
+
<strong>README.md</strong> - ${e("blocks.guide.readme")}
|
|
125
|
+
</li>
|
|
126
|
+
</ul>
|
|
127
|
+
</div>
|
|
128
|
+
|
|
129
|
+
<div class="section">
|
|
130
|
+
<h2 class="section-title">
|
|
131
|
+
<span class="section-icon">💡</span>
|
|
132
|
+
${e("blocks.guide.pro_tips")}
|
|
133
|
+
</h2>
|
|
134
|
+
<ul class="tip-list">
|
|
135
|
+
<li class="tip-item ${t}">
|
|
136
|
+
<span class="emoji">⚡</span>
|
|
137
|
+
${e("blocks.guide.tip_hot_reload")}
|
|
138
|
+
</li>
|
|
139
|
+
<li class="tip-item ${t}">
|
|
140
|
+
<span class="emoji">🎨</span>
|
|
141
|
+
${e("blocks.guide.tip_typescript")}
|
|
142
|
+
</li>
|
|
143
|
+
<li class="tip-item ${t}">
|
|
144
|
+
<span class="emoji">🔍</span>
|
|
145
|
+
${e("blocks.guide.tip_config")}
|
|
146
|
+
</li>
|
|
147
|
+
<li class="tip-item ${t}">
|
|
148
|
+
<span class="emoji">📦</span>
|
|
149
|
+
${e("blocks.guide.tip_folder")}
|
|
150
|
+
</li>
|
|
151
|
+
<li class="tip-item ${t}">
|
|
152
|
+
<span class="emoji">🎯</span>
|
|
153
|
+
${e("blocks.guide.tip_lit")}
|
|
154
|
+
</li>
|
|
155
|
+
</ul>
|
|
156
|
+
</div>
|
|
157
|
+
</div>
|
|
158
|
+
|
|
159
|
+
<div class="footer">
|
|
160
|
+
<p class="footer-text">🚀 ${e("blocks.guide.footer")} 🎉</p>
|
|
161
|
+
</div>
|
|
162
|
+
</div>
|
|
163
|
+
`;
|
|
164
|
+
}
|
|
165
|
+
};
|
|
166
|
+
a.styles = d`
|
|
167
|
+
:host {
|
|
168
|
+
display: block;
|
|
169
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.guide-container {
|
|
173
|
+
max-width: 1400px;
|
|
174
|
+
margin: 2rem auto;
|
|
175
|
+
padding: 2rem;
|
|
176
|
+
background: linear-gradient(34deg, #bbf3e5 -50%, #034d5c 100%);
|
|
177
|
+
border-radius: 16px;
|
|
178
|
+
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
|
|
179
|
+
color: white;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.guide-header {
|
|
183
|
+
text-align: center;
|
|
184
|
+
margin-bottom: 2rem;
|
|
185
|
+
padding-bottom: 1.5rem;
|
|
186
|
+
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
|
|
187
|
+
grid-column: 1 / -1;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.sections-grid {
|
|
191
|
+
display: grid;
|
|
192
|
+
grid-template-columns: 1fr;
|
|
193
|
+
gap: 1.5rem;
|
|
194
|
+
align-items: stretch;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.guide-title {
|
|
198
|
+
font-size: 2.5rem;
|
|
199
|
+
font-weight: bold;
|
|
200
|
+
margin: 0 0 0.5rem 0;
|
|
201
|
+
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.guide-subtitle {
|
|
205
|
+
font-size: 1.1rem;
|
|
206
|
+
opacity: 0.9;
|
|
207
|
+
margin: 0;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.section {
|
|
211
|
+
background: rgba(255, 255, 255, 0.1);
|
|
212
|
+
backdrop-filter: blur(10px);
|
|
213
|
+
border-radius: 12px;
|
|
214
|
+
padding: 1.5rem;
|
|
215
|
+
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
216
|
+
display: flex;
|
|
217
|
+
flex-direction: column;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.section.full-width {
|
|
221
|
+
grid-column: 1 / -1;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.section-title {
|
|
225
|
+
font-size: 1.3rem;
|
|
226
|
+
font-weight: 600;
|
|
227
|
+
margin: 0 0 1rem 0;
|
|
228
|
+
display: flex;
|
|
229
|
+
align-items: center;
|
|
230
|
+
gap: 0.5rem;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.section-icon {
|
|
234
|
+
font-size: 1.5rem;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.command-list,
|
|
238
|
+
.tip-list,
|
|
239
|
+
.shortcut-list {
|
|
240
|
+
list-style: none;
|
|
241
|
+
padding: 0;
|
|
242
|
+
margin: 0;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.command-item,
|
|
246
|
+
.tip-item,
|
|
247
|
+
.shortcut-item {
|
|
248
|
+
padding: 0.75rem;
|
|
249
|
+
margin-bottom: 0.5rem;
|
|
250
|
+
background: rgba(255, 255, 255, 0.1);
|
|
251
|
+
border-radius: 8px;
|
|
252
|
+
border-left: 3px solid rgba(255, 255, 255, 0.5);
|
|
253
|
+
transition: all 0.2s;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.command-item:hover,
|
|
257
|
+
.tip-item:hover,
|
|
258
|
+
.shortcut-item:hover {
|
|
259
|
+
background: rgba(255, 255, 255, 0.15);
|
|
260
|
+
border-left-color: white;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
.command-item.ltr:hover,
|
|
264
|
+
.tip-item.ltr:hover,
|
|
265
|
+
.shortcut-item.ltr:hover {
|
|
266
|
+
transform: translateX(5px);
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.command-item.rtl:hover,
|
|
270
|
+
.tip-item.rtl:hover,
|
|
271
|
+
.shortcut-item.rtl:hover {
|
|
272
|
+
transform: translateX(-5px);
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.rtl .command-item,
|
|
276
|
+
.rtl .tip-item,
|
|
277
|
+
.rtl .shortcut-item {
|
|
278
|
+
border-left: none;
|
|
279
|
+
border-right: 3px solid rgba(255, 255, 255, 0.5);
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.rtl .command-item:hover,
|
|
283
|
+
.rtl .tip-item:hover,
|
|
284
|
+
.rtl .shortcut-item:hover {
|
|
285
|
+
border-right-color: white;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.command-code {
|
|
289
|
+
font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
|
|
290
|
+
background: rgba(0, 0, 0, 0.3);
|
|
291
|
+
padding: 0.2rem 0.5rem;
|
|
292
|
+
border-radius: 4px;
|
|
293
|
+
font-size: 0.85rem;
|
|
294
|
+
display: inline;
|
|
295
|
+
direction: ltr;
|
|
296
|
+
white-space: nowrap;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.command-separator {
|
|
300
|
+
opacity: 0.7;
|
|
301
|
+
margin: 0 0.3rem;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
.command-description {
|
|
305
|
+
font-size: 0.9rem;
|
|
306
|
+
opacity: 0.9;
|
|
307
|
+
display: inline;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
.shortcut-key {
|
|
311
|
+
background: rgba(0, 0, 0, 0.3);
|
|
312
|
+
padding: 0.2rem 0.5rem;
|
|
313
|
+
border-radius: 4px;
|
|
314
|
+
font-family: monospace;
|
|
315
|
+
font-weight: bold;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
.ltr .shortcut-key {
|
|
319
|
+
margin-right: 0.5rem;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.rtl .shortcut-key {
|
|
323
|
+
margin-left: 0.5rem;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.footer {
|
|
327
|
+
text-align: center;
|
|
328
|
+
margin-top: 1.5rem;
|
|
329
|
+
padding-top: 1.5rem;
|
|
330
|
+
border-top: 2px solid rgba(255, 255, 255, 0.2);
|
|
331
|
+
grid-column: 1 / -1;
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
.footer-text {
|
|
335
|
+
font-size: 1.2rem;
|
|
336
|
+
margin: 0;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.emoji {
|
|
340
|
+
font-size: 1.2em;
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
.ltr .emoji {
|
|
344
|
+
margin-right: 0.3rem;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
.rtl .emoji {
|
|
348
|
+
margin-left: 0.3rem;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
/* Tablet and up: 2 columns */
|
|
352
|
+
@media (min-width: 768px) {
|
|
353
|
+
.sections-grid {
|
|
354
|
+
grid-template-columns: repeat(2, 1fr);
|
|
355
|
+
}
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
/* Large screens: optimize spacing */
|
|
359
|
+
@media (min-width: 1200px) {
|
|
360
|
+
.guide-container {
|
|
361
|
+
padding: 3rem;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
.sections-grid {
|
|
365
|
+
gap: 2rem;
|
|
366
|
+
}
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
/* Mobile: single column, compact spacing */
|
|
370
|
+
@media (max-width: 767px) {
|
|
371
|
+
.guide-container {
|
|
372
|
+
margin: 1rem;
|
|
373
|
+
padding: 1.5rem;
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
.guide-title {
|
|
377
|
+
font-size: 2rem;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
.section {
|
|
381
|
+
padding: 1rem;
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
.sections-grid {
|
|
385
|
+
gap: 1rem;
|
|
386
|
+
}
|
|
387
|
+
}
|
|
388
|
+
`;
|
|
389
|
+
let i = a;
|
|
390
|
+
u([
|
|
391
|
+
p({ type: Boolean })
|
|
392
|
+
], i.prototype, "isRtl");
|
|
393
|
+
typeof i < "u" && i.registerSallaComponent("salla-getting-started-guide");
|
|
394
|
+
export {
|
|
395
|
+
i as default
|
|
396
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salla.sa/twilight-bundles-starter-kit",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.23",
|
|
4
4
|
"description": "Starter kit for building custom Salla components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"keywords": [
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"lit": "^3.2.1",
|
|
36
|
-
"@salla.sa/twilight-bundles": "0.1.
|
|
36
|
+
"@salla.sa/twilight-bundles": "0.1.29"
|
|
37
37
|
},
|
|
38
38
|
"engines": {
|
|
39
39
|
"node": ">=16.0.0",
|
|
@@ -42,8 +42,6 @@
|
|
|
42
42
|
"scripts": {
|
|
43
43
|
"dev": "vite",
|
|
44
44
|
"build": "vite build",
|
|
45
|
-
"
|
|
46
|
-
"format": "prettier --write \"src/**/*.{ts,html,css}\"",
|
|
47
|
-
"create-component": "tw-component"
|
|
45
|
+
"format": "prettier --write \"src/**/*.{ts,html,css}\""
|
|
48
46
|
}
|
|
49
47
|
}
|
|
@@ -0,0 +1,390 @@
|
|
|
1
|
+
import { css, html, LitElement } from "lit";
|
|
2
|
+
import { property } from "lit/decorators.js";
|
|
3
|
+
|
|
4
|
+
export default class GettingStartedGuide extends LitElement {
|
|
5
|
+
@property({ type: Boolean })
|
|
6
|
+
private isRtl: boolean = false;
|
|
7
|
+
|
|
8
|
+
connectedCallback() {
|
|
9
|
+
super.connectedCallback();
|
|
10
|
+
|
|
11
|
+
this.isRtl = Salla.config.get('theme.is_rtl', true);
|
|
12
|
+
Salla.lang.addBulk({
|
|
13
|
+
"blocks.guide.title": { ar: "مرحباً بك في Twilight Bundles!", en: "Welcome to Twilight Bundles!" },
|
|
14
|
+
"blocks.guide.subtitle": { ar: "رحلتك لبناء مكونات Salla المذهلة تبدأ من هنا", en: "Your journey to building amazing Salla components starts here" },
|
|
15
|
+
"blocks.guide.dev_commands": { ar: "أوامر التطوير", en: "Development Commands" },
|
|
16
|
+
"blocks.guide.dev_start": { ar: "تشغيل خادم التطوير مع إعادة التحميل التلقائي", en: "Start development server with hot reload" },
|
|
17
|
+
"blocks.guide.build": { ar: "بناء الحزم للإنتاج", en: "Build bundles for production" },
|
|
18
|
+
"blocks.guide.create_component": { ar: "إنشاء مكون جديد", en: "Create a new component" },
|
|
19
|
+
"blocks.guide.delete_component": { ar: "حذف مكون موجود", en: "Delete an existing component" },
|
|
20
|
+
"blocks.guide.shortcuts": { ar: "اختصارات لوحة المفاتيح (في وضع التطوير)", en: "Keyboard Shortcuts (in dev mode)" },
|
|
21
|
+
"blocks.guide.quit": { ar: "إيقاف الخادم بأمان", en: "Quit the dev server safely" },
|
|
22
|
+
"blocks.guide.restart": { ar: "إعادة تشغيل الخادم", en: "Restart the dev server" },
|
|
23
|
+
"blocks.guide.open_browser": { ar: "فتح في المتصفح", en: "Open in browser" },
|
|
24
|
+
"blocks.guide.force_stop": { ar: "إيقاف قسري لخادم التطوير", en: "Force stop the development server" },
|
|
25
|
+
"blocks.guide.project_structure": { ar: "هيكل المشروع", en: "Project Structure" },
|
|
26
|
+
"blocks.guide.components_folder": { ar: "مكونات الحزمة موجودة هنا", en: "Your bundle components live here" },
|
|
27
|
+
"blocks.guide.example_components": { ar: "المكونات الموجودة هي أمثلة فقط - يمكنك حذفها يدوياً أو باستخدام tw-delete-component", en: "Existing components are examples - remove them manually or use tw-delete-component" },
|
|
28
|
+
"blocks.guide.bundle_config": { ar: "إعدادات الحزمة ومخططات المكونات", en: "Bundle configuration and component schemas" },
|
|
29
|
+
"blocks.guide.build_config": { ar: "إعدادات البناء", en: "Build configuration" },
|
|
30
|
+
"blocks.guide.readme": { ar: "نظرة عامة على المشروع والتوثيق", en: "Project overview and documentation" },
|
|
31
|
+
"blocks.guide.pro_tips": { ar: "نصائح احترافية", en: "Pro Tips" },
|
|
32
|
+
"blocks.guide.tip_hot_reload": { ar: "عدّل الملفات في src/ لرؤية التغييرات فوراً مع إعادة التحميل التلقائي", en: "Edit files in src/ to see changes instantly with hot reload" },
|
|
33
|
+
"blocks.guide.tip_typescript": { ar: "استخدم TypeScript للحصول على أمان أفضل للأنواع ودعم IDE", en: "Use TypeScript for better type safety and IDE support" },
|
|
34
|
+
"blocks.guide.tip_config": { ar: "راجع twilight-bundle.json لتكوين حقول المكونات والإعدادات", en: "Check twilight-bundle.json to configure component fields and settings" },
|
|
35
|
+
"blocks.guide.tip_folder": { ar: "يجب أن يكون كل مكون في مجلد خاص به مع ملف index.ts", en: "Each component should be in its own folder with an index.ts file" },
|
|
36
|
+
"blocks.guide.tip_lit": { ar: "استخدم Lit لبناء مكونات الويب مع الخصائص التفاعلية", en: "Use Lit for building web components with reactive properties" },
|
|
37
|
+
"blocks.guide.footer": { ar: "برمجة سعيدة! ابنِ شيئاً مذهلاً!", en: "Happy Coding! Build something amazing!" }
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
static styles = css`
|
|
41
|
+
:host {
|
|
42
|
+
display: block;
|
|
43
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.guide-container {
|
|
47
|
+
max-width: 1400px;
|
|
48
|
+
margin: 2rem auto;
|
|
49
|
+
padding: 2rem;
|
|
50
|
+
background: linear-gradient(34deg, #bbf3e5 -50%, #034d5c 100%);
|
|
51
|
+
border-radius: 16px;
|
|
52
|
+
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
|
|
53
|
+
color: white;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.guide-header {
|
|
57
|
+
text-align: center;
|
|
58
|
+
margin-bottom: 2rem;
|
|
59
|
+
padding-bottom: 1.5rem;
|
|
60
|
+
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
|
|
61
|
+
grid-column: 1 / -1;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.sections-grid {
|
|
65
|
+
display: grid;
|
|
66
|
+
grid-template-columns: 1fr;
|
|
67
|
+
gap: 1.5rem;
|
|
68
|
+
align-items: stretch;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.guide-title {
|
|
72
|
+
font-size: 2.5rem;
|
|
73
|
+
font-weight: bold;
|
|
74
|
+
margin: 0 0 0.5rem 0;
|
|
75
|
+
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.guide-subtitle {
|
|
79
|
+
font-size: 1.1rem;
|
|
80
|
+
opacity: 0.9;
|
|
81
|
+
margin: 0;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.section {
|
|
85
|
+
background: rgba(255, 255, 255, 0.1);
|
|
86
|
+
backdrop-filter: blur(10px);
|
|
87
|
+
border-radius: 12px;
|
|
88
|
+
padding: 1.5rem;
|
|
89
|
+
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
90
|
+
display: flex;
|
|
91
|
+
flex-direction: column;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.section.full-width {
|
|
95
|
+
grid-column: 1 / -1;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.section-title {
|
|
99
|
+
font-size: 1.3rem;
|
|
100
|
+
font-weight: 600;
|
|
101
|
+
margin: 0 0 1rem 0;
|
|
102
|
+
display: flex;
|
|
103
|
+
align-items: center;
|
|
104
|
+
gap: 0.5rem;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.section-icon {
|
|
108
|
+
font-size: 1.5rem;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.command-list,
|
|
112
|
+
.tip-list,
|
|
113
|
+
.shortcut-list {
|
|
114
|
+
list-style: none;
|
|
115
|
+
padding: 0;
|
|
116
|
+
margin: 0;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.command-item,
|
|
120
|
+
.tip-item,
|
|
121
|
+
.shortcut-item {
|
|
122
|
+
padding: 0.75rem;
|
|
123
|
+
margin-bottom: 0.5rem;
|
|
124
|
+
background: rgba(255, 255, 255, 0.1);
|
|
125
|
+
border-radius: 8px;
|
|
126
|
+
border-left: 3px solid rgba(255, 255, 255, 0.5);
|
|
127
|
+
transition: all 0.2s;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.command-item:hover,
|
|
131
|
+
.tip-item:hover,
|
|
132
|
+
.shortcut-item:hover {
|
|
133
|
+
background: rgba(255, 255, 255, 0.15);
|
|
134
|
+
border-left-color: white;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.command-item.ltr:hover,
|
|
138
|
+
.tip-item.ltr:hover,
|
|
139
|
+
.shortcut-item.ltr:hover {
|
|
140
|
+
transform: translateX(5px);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.command-item.rtl:hover,
|
|
144
|
+
.tip-item.rtl:hover,
|
|
145
|
+
.shortcut-item.rtl:hover {
|
|
146
|
+
transform: translateX(-5px);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.rtl .command-item,
|
|
150
|
+
.rtl .tip-item,
|
|
151
|
+
.rtl .shortcut-item {
|
|
152
|
+
border-left: none;
|
|
153
|
+
border-right: 3px solid rgba(255, 255, 255, 0.5);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.rtl .command-item:hover,
|
|
157
|
+
.rtl .tip-item:hover,
|
|
158
|
+
.rtl .shortcut-item:hover {
|
|
159
|
+
border-right-color: white;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.command-code {
|
|
163
|
+
font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
|
|
164
|
+
background: rgba(0, 0, 0, 0.3);
|
|
165
|
+
padding: 0.2rem 0.5rem;
|
|
166
|
+
border-radius: 4px;
|
|
167
|
+
font-size: 0.85rem;
|
|
168
|
+
display: inline;
|
|
169
|
+
direction: ltr;
|
|
170
|
+
white-space: nowrap;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.command-separator {
|
|
174
|
+
opacity: 0.7;
|
|
175
|
+
margin: 0 0.3rem;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.command-description {
|
|
179
|
+
font-size: 0.9rem;
|
|
180
|
+
opacity: 0.9;
|
|
181
|
+
display: inline;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.shortcut-key {
|
|
185
|
+
background: rgba(0, 0, 0, 0.3);
|
|
186
|
+
padding: 0.2rem 0.5rem;
|
|
187
|
+
border-radius: 4px;
|
|
188
|
+
font-family: monospace;
|
|
189
|
+
font-weight: bold;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.ltr .shortcut-key {
|
|
193
|
+
margin-right: 0.5rem;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.rtl .shortcut-key {
|
|
197
|
+
margin-left: 0.5rem;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.footer {
|
|
201
|
+
text-align: center;
|
|
202
|
+
margin-top: 1.5rem;
|
|
203
|
+
padding-top: 1.5rem;
|
|
204
|
+
border-top: 2px solid rgba(255, 255, 255, 0.2);
|
|
205
|
+
grid-column: 1 / -1;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.footer-text {
|
|
209
|
+
font-size: 1.2rem;
|
|
210
|
+
margin: 0;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.emoji {
|
|
214
|
+
font-size: 1.2em;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.ltr .emoji {
|
|
218
|
+
margin-right: 0.3rem;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.rtl .emoji {
|
|
222
|
+
margin-left: 0.3rem;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
/* Tablet and up: 2 columns */
|
|
226
|
+
@media (min-width: 768px) {
|
|
227
|
+
.sections-grid {
|
|
228
|
+
grid-template-columns: repeat(2, 1fr);
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
/* Large screens: optimize spacing */
|
|
233
|
+
@media (min-width: 1200px) {
|
|
234
|
+
.guide-container {
|
|
235
|
+
padding: 3rem;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
.sections-grid {
|
|
239
|
+
gap: 2rem;
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
/* Mobile: single column, compact spacing */
|
|
244
|
+
@media (max-width: 767px) {
|
|
245
|
+
.guide-container {
|
|
246
|
+
margin: 1rem;
|
|
247
|
+
padding: 1.5rem;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.guide-title {
|
|
251
|
+
font-size: 2rem;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.section {
|
|
255
|
+
padding: 1rem;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.sections-grid {
|
|
259
|
+
gap: 1rem;
|
|
260
|
+
}
|
|
261
|
+
}
|
|
262
|
+
`;
|
|
263
|
+
|
|
264
|
+
render() {
|
|
265
|
+
const t = (key: string) => typeof Salla !== 'undefined' ? Salla.lang.get(key) : key;
|
|
266
|
+
const dirClass = this.isRtl ? 'rtl' : 'ltr';
|
|
267
|
+
|
|
268
|
+
return html`
|
|
269
|
+
<div class="guide-container ${dirClass}">
|
|
270
|
+
<div class="guide-header">
|
|
271
|
+
<h1 class="guide-title">🚀 ${t('blocks.guide.title')}</h1>
|
|
272
|
+
<p class="guide-subtitle">${t('blocks.guide.subtitle')}</p>
|
|
273
|
+
</div>
|
|
274
|
+
|
|
275
|
+
<div class="sections-grid">
|
|
276
|
+
<div class="section">
|
|
277
|
+
<h2 class="section-title">
|
|
278
|
+
<span class="section-icon">🔧</span>
|
|
279
|
+
${t('blocks.guide.dev_commands')}
|
|
280
|
+
</h2>
|
|
281
|
+
<ul class="command-list">
|
|
282
|
+
<li class="command-item ${dirClass}">
|
|
283
|
+
<span class="command-code">pnpm dev</span>
|
|
284
|
+
<span class="command-separator"> - </span>
|
|
285
|
+
<span class="command-description">${t('blocks.guide.dev_start')}</span>
|
|
286
|
+
</li>
|
|
287
|
+
<li class="command-item ${dirClass}">
|
|
288
|
+
<span class="command-code">pnpm build</span>
|
|
289
|
+
<span class="command-separator"> - </span>
|
|
290
|
+
<span class="command-description">${t('blocks.guide.build')}</span>
|
|
291
|
+
</li>
|
|
292
|
+
<li class="command-item ${dirClass}">
|
|
293
|
+
<span class="command-code">tw-create-component</span>
|
|
294
|
+
<span class="command-separator"> - </span>
|
|
295
|
+
<span class="command-description">${t('blocks.guide.create_component')}</span>
|
|
296
|
+
</li>
|
|
297
|
+
<li class="command-item ${dirClass}">
|
|
298
|
+
<span class="command-code">tw-delete-component</span>
|
|
299
|
+
<span class="command-separator"> - </span>
|
|
300
|
+
<span class="command-description">${t('blocks.guide.delete_component')}</span>
|
|
301
|
+
</li>
|
|
302
|
+
</ul>
|
|
303
|
+
</div>
|
|
304
|
+
|
|
305
|
+
<div class="section">
|
|
306
|
+
<h2 class="section-title">
|
|
307
|
+
<span class="section-icon">⌨️</span>
|
|
308
|
+
${t('blocks.guide.shortcuts')}
|
|
309
|
+
</h2>
|
|
310
|
+
<ul class="shortcut-list">
|
|
311
|
+
<li class="shortcut-item ${dirClass}">
|
|
312
|
+
<span class="shortcut-key">q + Enter</span>
|
|
313
|
+
<span>${t('blocks.guide.quit')}</span>
|
|
314
|
+
</li>
|
|
315
|
+
<li class="shortcut-item ${dirClass}">
|
|
316
|
+
<span class="shortcut-key">r + Enter</span>
|
|
317
|
+
<span>${t('blocks.guide.restart')}</span>
|
|
318
|
+
</li>
|
|
319
|
+
<li class="shortcut-item ${dirClass}">
|
|
320
|
+
<span class="shortcut-key">o + Enter</span>
|
|
321
|
+
<span>${t('blocks.guide.open_browser')}</span>
|
|
322
|
+
</li>
|
|
323
|
+
<li class="shortcut-item ${dirClass}">
|
|
324
|
+
<span class="shortcut-key">Ctrl+C</span>
|
|
325
|
+
<span>${t('blocks.guide.force_stop')}</span>
|
|
326
|
+
</li>
|
|
327
|
+
</ul>
|
|
328
|
+
</div>
|
|
329
|
+
|
|
330
|
+
<div class="section">
|
|
331
|
+
<h2 class="section-title">
|
|
332
|
+
<span class="section-icon">📚</span>
|
|
333
|
+
${t('blocks.guide.project_structure')}
|
|
334
|
+
</h2>
|
|
335
|
+
<ul class="tip-list">
|
|
336
|
+
<li class="tip-item ${dirClass}">
|
|
337
|
+
<strong>src/components/</strong> - ${t('blocks.guide.components_folder')}
|
|
338
|
+
</li>
|
|
339
|
+
<li class="tip-item ${dirClass}" style="opacity: 0.85; font-size: 0.85rem;">
|
|
340
|
+
💡 ${t('blocks.guide.example_components')}
|
|
341
|
+
</li>
|
|
342
|
+
<li class="tip-item ${dirClass}">
|
|
343
|
+
<strong>twilight-bundle.json</strong> - ${t('blocks.guide.bundle_config')}
|
|
344
|
+
</li>
|
|
345
|
+
<li class="tip-item ${dirClass}">
|
|
346
|
+
<strong>vite.config.ts</strong> - ${t('blocks.guide.build_config')}
|
|
347
|
+
</li>
|
|
348
|
+
<li class="tip-item ${dirClass}">
|
|
349
|
+
<strong>README.md</strong> - ${t('blocks.guide.readme')}
|
|
350
|
+
</li>
|
|
351
|
+
</ul>
|
|
352
|
+
</div>
|
|
353
|
+
|
|
354
|
+
<div class="section">
|
|
355
|
+
<h2 class="section-title">
|
|
356
|
+
<span class="section-icon">💡</span>
|
|
357
|
+
${t('blocks.guide.pro_tips')}
|
|
358
|
+
</h2>
|
|
359
|
+
<ul class="tip-list">
|
|
360
|
+
<li class="tip-item ${dirClass}">
|
|
361
|
+
<span class="emoji">⚡</span>
|
|
362
|
+
${t('blocks.guide.tip_hot_reload')}
|
|
363
|
+
</li>
|
|
364
|
+
<li class="tip-item ${dirClass}">
|
|
365
|
+
<span class="emoji">🎨</span>
|
|
366
|
+
${t('blocks.guide.tip_typescript')}
|
|
367
|
+
</li>
|
|
368
|
+
<li class="tip-item ${dirClass}">
|
|
369
|
+
<span class="emoji">🔍</span>
|
|
370
|
+
${t('blocks.guide.tip_config')}
|
|
371
|
+
</li>
|
|
372
|
+
<li class="tip-item ${dirClass}">
|
|
373
|
+
<span class="emoji">📦</span>
|
|
374
|
+
${t('blocks.guide.tip_folder')}
|
|
375
|
+
</li>
|
|
376
|
+
<li class="tip-item ${dirClass}">
|
|
377
|
+
<span class="emoji">🎯</span>
|
|
378
|
+
${t('blocks.guide.tip_lit')}
|
|
379
|
+
</li>
|
|
380
|
+
</ul>
|
|
381
|
+
</div>
|
|
382
|
+
</div>
|
|
383
|
+
|
|
384
|
+
<div class="footer">
|
|
385
|
+
<p class="footer-text">🚀 ${t('blocks.guide.footer')} 🎉</p>
|
|
386
|
+
</div>
|
|
387
|
+
</div>
|
|
388
|
+
`;
|
|
389
|
+
}
|
|
390
|
+
}
|
package/src/types/salla.d.ts
CHANGED
package/twilight-bundle.json
CHANGED
|
@@ -14,6 +14,13 @@
|
|
|
14
14
|
},
|
|
15
15
|
"repository": "https://github.com/SallaApp/twilight-bundles-starter-kit",
|
|
16
16
|
"components": [
|
|
17
|
+
{
|
|
18
|
+
"title": "Getting Started Guide",
|
|
19
|
+
"icon": "sicon-rocket",
|
|
20
|
+
"name": "getting-started-guide",
|
|
21
|
+
"key": "0a1b2c3d-4e5f-6g7h-8i9j-0k1l2m3n4o5p",
|
|
22
|
+
"image": "https://cdn.salla.network/images/themes/raed/preview-images/getting-started.png"
|
|
23
|
+
},
|
|
17
24
|
{
|
|
18
25
|
"title": "Basic Inputs",
|
|
19
26
|
"icon": "sicon-format-text-alt",
|