nova-cli 0.1.0
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.
- checksums.yaml +7 -0
- data/README.md +115 -0
- data/bin/nova +5 -0
- data/lib/nova/cli.rb +37 -0
- data/lib/nova/generator.rb +170 -0
- data/lib/nova/templates/big_picture_readme_template.md +29 -0
- data/lib/nova/templates/design_decisions_example.md +85 -0
- data/lib/nova/templates/design_system_readme_template.md +22 -0
- data/lib/nova/templates/flowchart_template.md +72 -0
- data/lib/nova/templates/prd_example_template.md +41 -0
- data/lib/nova/templates/prompts_example.md +134 -0
- data/lib/nova/templates/prompts_examples/01_generate_app.md +94 -0
- data/lib/nova/templates/prompts_examples/02_generate_styleguide.md +26 -0
- data/lib/nova/templates/prompts_examples/03_generate_static_pages.md +26 -0
- data/lib/nova/templates/prompts_examples/04_authentication_feature.md +41 -0
- data/lib/nova/templates/prompts_readme_template.md +27 -0
- data/lib/nova/templates/readme_template.md +74 -0
- data/lib/nova/templates/styleguide_index.html +385 -0
- data/lib/nova/templates/user_stories_readme_template.md +27 -0
- data/lib/nova/templates/user_story_example.md +83 -0
- data/lib/nova.rb +6 -0
- metadata +77 -0
|
@@ -0,0 +1,385 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Design System Styleguide</title>
|
|
7
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
8
|
+
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.0/flowbite.min.css" rel="stylesheet" />
|
|
9
|
+
<script>
|
|
10
|
+
tailwind.config = {
|
|
11
|
+
theme: {
|
|
12
|
+
extend: {
|
|
13
|
+
colors: {
|
|
14
|
+
primary: {
|
|
15
|
+
DEFAULT: '#4A7AFF',
|
|
16
|
+
hover: '#3A6AEF',
|
|
17
|
+
active: '#2A5ADF'
|
|
18
|
+
},
|
|
19
|
+
secondary: {
|
|
20
|
+
DEFAULT: '#6C47FF',
|
|
21
|
+
hover: '#5C37EF',
|
|
22
|
+
active: '#4C27DF'
|
|
23
|
+
},
|
|
24
|
+
success: '#4CAF50',
|
|
25
|
+
warning: '#FF9800',
|
|
26
|
+
error: '#F44336',
|
|
27
|
+
info: '#2196F3',
|
|
28
|
+
},
|
|
29
|
+
fontFamily: {
|
|
30
|
+
sans: ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif']
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
</script>
|
|
36
|
+
<style>
|
|
37
|
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
|
38
|
+
</style>
|
|
39
|
+
</head>
|
|
40
|
+
<body class="bg-gray-50 text-gray-900">
|
|
41
|
+
<header class="bg-white shadow">
|
|
42
|
+
<div class="container mx-auto px-4 py-6">
|
|
43
|
+
<h1 class="text-3xl font-bold">Design System Styleguide</h1>
|
|
44
|
+
<p class="mt-2 text-gray-600">A reference implementation of the design decisions</p>
|
|
45
|
+
</div>
|
|
46
|
+
</header>
|
|
47
|
+
|
|
48
|
+
<nav class="bg-white border-b border-gray-200">
|
|
49
|
+
<div class="container mx-auto px-4">
|
|
50
|
+
<div class="flex flex-wrap -mx-2">
|
|
51
|
+
<a href="#colors" class="px-4 py-3 mx-2 border-b-2 border-primary font-medium">Colors</a>
|
|
52
|
+
<a href="#typography" class="px-4 py-3 mx-2 hover:border-b-2 hover:border-primary font-medium">Typography</a>
|
|
53
|
+
<a href="#spacing" class="px-4 py-3 mx-2 hover:border-b-2 hover:border-primary font-medium">Spacing</a>
|
|
54
|
+
<a href="#components" class="px-4 py-3 mx-2 hover:border-b-2 hover:border-primary font-medium">Components</a>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
</nav>
|
|
58
|
+
|
|
59
|
+
<main class="container mx-auto px-4 py-8">
|
|
60
|
+
<!-- Color Section -->
|
|
61
|
+
<section id="colors" class="mb-16">
|
|
62
|
+
<h2 class="text-2xl font-bold mb-6 pb-2 border-b">Colors</h2>
|
|
63
|
+
|
|
64
|
+
<div class="mb-8">
|
|
65
|
+
<h3 class="text-xl font-semibold mb-4">Primary Colors</h3>
|
|
66
|
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
67
|
+
<div class="p-4 rounded-md shadow-md">
|
|
68
|
+
<div class="h-24 rounded bg-primary mb-2"></div>
|
|
69
|
+
<div class="font-medium">Brand Primary</div>
|
|
70
|
+
<div class="text-sm text-gray-600">#4A7AFF</div>
|
|
71
|
+
<div class="text-sm mt-1">Main brand color, buttons</div>
|
|
72
|
+
</div>
|
|
73
|
+
<div class="p-4 rounded-md shadow-md">
|
|
74
|
+
<div class="h-24 rounded bg-secondary mb-2"></div>
|
|
75
|
+
<div class="font-medium">Brand Secondary</div>
|
|
76
|
+
<div class="text-sm text-gray-600">#6C47FF</div>
|
|
77
|
+
<div class="text-sm mt-1">Secondary actions, highlights</div>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
|
|
82
|
+
<div class="mb-8">
|
|
83
|
+
<h3 class="text-xl font-semibold mb-4">Neutral Colors</h3>
|
|
84
|
+
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
85
|
+
<div class="p-4 rounded-md shadow-md">
|
|
86
|
+
<div class="h-16 rounded bg-black mb-2"></div>
|
|
87
|
+
<div class="font-medium">Black</div>
|
|
88
|
+
<div class="text-sm text-gray-600">#000000</div>
|
|
89
|
+
</div>
|
|
90
|
+
<div class="p-4 rounded-md shadow-md">
|
|
91
|
+
<div class="h-16 rounded bg-gray-800 mb-2"></div>
|
|
92
|
+
<div class="font-medium">Dark Gray</div>
|
|
93
|
+
<div class="text-sm text-gray-600">#333333</div>
|
|
94
|
+
</div>
|
|
95
|
+
<div class="p-4 rounded-md shadow-md">
|
|
96
|
+
<div class="h-16 rounded bg-gray-500 mb-2"></div>
|
|
97
|
+
<div class="font-medium">Medium Gray</div>
|
|
98
|
+
<div class="text-sm text-gray-600">#666666</div>
|
|
99
|
+
</div>
|
|
100
|
+
<div class="p-4 rounded-md shadow-md">
|
|
101
|
+
<div class="h-16 rounded bg-gray-300 mb-2"></div>
|
|
102
|
+
<div class="font-medium">Light Gray</div>
|
|
103
|
+
<div class="text-sm text-gray-600">#CCCCCC</div>
|
|
104
|
+
</div>
|
|
105
|
+
<div class="p-4 rounded-md shadow-md">
|
|
106
|
+
<div class="h-16 rounded bg-gray-100 mb-2"></div>
|
|
107
|
+
<div class="font-medium">Off-White</div>
|
|
108
|
+
<div class="text-sm text-gray-600">#F5F5F5</div>
|
|
109
|
+
</div>
|
|
110
|
+
<div class="p-4 rounded-md shadow-md">
|
|
111
|
+
<div class="h-16 rounded bg-white border border-gray-300 mb-2"></div>
|
|
112
|
+
<div class="font-medium">White</div>
|
|
113
|
+
<div class="text-sm text-gray-600">#FFFFFF</div>
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
</div>
|
|
117
|
+
|
|
118
|
+
<div>
|
|
119
|
+
<h3 class="text-xl font-semibold mb-4">Semantic Colors</h3>
|
|
120
|
+
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
121
|
+
<div class="p-4 rounded-md shadow-md">
|
|
122
|
+
<div class="h-16 rounded bg-success mb-2"></div>
|
|
123
|
+
<div class="font-medium">Success</div>
|
|
124
|
+
<div class="text-sm text-gray-600">#4CAF50</div>
|
|
125
|
+
</div>
|
|
126
|
+
<div class="p-4 rounded-md shadow-md">
|
|
127
|
+
<div class="h-16 rounded bg-warning mb-2"></div>
|
|
128
|
+
<div class="font-medium">Warning</div>
|
|
129
|
+
<div class="text-sm text-gray-600">#FF9800</div>
|
|
130
|
+
</div>
|
|
131
|
+
<div class="p-4 rounded-md shadow-md">
|
|
132
|
+
<div class="h-16 rounded bg-error mb-2"></div>
|
|
133
|
+
<div class="font-medium">Error</div>
|
|
134
|
+
<div class="text-sm text-gray-600">#F44336</div>
|
|
135
|
+
</div>
|
|
136
|
+
<div class="p-4 rounded-md shadow-md">
|
|
137
|
+
<div class="h-16 rounded bg-info mb-2"></div>
|
|
138
|
+
<div class="font-medium">Info</div>
|
|
139
|
+
<div class="text-sm text-gray-600">#2196F3</div>
|
|
140
|
+
</div>
|
|
141
|
+
</div>
|
|
142
|
+
</div>
|
|
143
|
+
</section>
|
|
144
|
+
|
|
145
|
+
<!-- Typography Section -->
|
|
146
|
+
<section id="typography" class="mb-16">
|
|
147
|
+
<h2 class="text-2xl font-bold mb-6 pb-2 border-b">Typography</h2>
|
|
148
|
+
|
|
149
|
+
<div class="mb-8 space-y-6">
|
|
150
|
+
<div class="p-4 rounded-md bg-white shadow-md">
|
|
151
|
+
<h1 class="text-4xl font-bold">Heading 1 (32px)</h1>
|
|
152
|
+
<div class="text-sm text-gray-600 mt-2">Font: Inter, Weight: 700, Line height: 1.2</div>
|
|
153
|
+
</div>
|
|
154
|
+
|
|
155
|
+
<div class="p-4 rounded-md bg-white shadow-md">
|
|
156
|
+
<h2 class="text-3xl font-bold">Heading 2 (24px)</h2>
|
|
157
|
+
<div class="text-sm text-gray-600 mt-2">Font: Inter, Weight: 700, Line height: 1.2</div>
|
|
158
|
+
</div>
|
|
159
|
+
|
|
160
|
+
<div class="p-4 rounded-md bg-white shadow-md">
|
|
161
|
+
<h3 class="text-2xl font-semibold">Heading 3 (20px)</h3>
|
|
162
|
+
<div class="text-sm text-gray-600 mt-2">Font: Inter, Weight: 600, Line height: 1.3</div>
|
|
163
|
+
</div>
|
|
164
|
+
|
|
165
|
+
<div class="p-4 rounded-md bg-white shadow-md">
|
|
166
|
+
<p class="text-base">Body Text (16px) - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
|
|
167
|
+
<div class="text-sm text-gray-600 mt-2">Font: Inter, Weight: 400, Line height: 1.5</div>
|
|
168
|
+
</div>
|
|
169
|
+
|
|
170
|
+
<div class="p-4 rounded-md bg-white shadow-md">
|
|
171
|
+
<p class="text-sm">Small Text (14px) - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
172
|
+
<div class="text-sm text-gray-600 mt-2">Font: Inter, Weight: 400, Line height: 1.5</div>
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
</section>
|
|
176
|
+
|
|
177
|
+
<!-- Spacing Section -->
|
|
178
|
+
<section id="spacing" class="mb-16">
|
|
179
|
+
<h2 class="text-2xl font-bold mb-6 pb-2 border-b">Spacing</h2>
|
|
180
|
+
|
|
181
|
+
<div class="mb-8">
|
|
182
|
+
<h3 class="text-xl font-semibold mb-4">Spacing Scale</h3>
|
|
183
|
+
<div class="space-y-4">
|
|
184
|
+
<div class="p-4 bg-white rounded-md shadow-md">
|
|
185
|
+
<div class="flex items-center">
|
|
186
|
+
<div class="bg-primary w-4 h-4"></div>
|
|
187
|
+
<div class="ml-4">
|
|
188
|
+
<div class="font-medium">XS (4px / 0.25rem)</div>
|
|
189
|
+
<div class="text-sm text-gray-600">Minimal spacing, icons</div>
|
|
190
|
+
</div>
|
|
191
|
+
</div>
|
|
192
|
+
</div>
|
|
193
|
+
|
|
194
|
+
<div class="p-4 bg-white rounded-md shadow-md">
|
|
195
|
+
<div class="flex items-center">
|
|
196
|
+
<div class="bg-primary w-8 h-8"></div>
|
|
197
|
+
<div class="ml-4">
|
|
198
|
+
<div class="font-medium">Small (8px / 0.5rem)</div>
|
|
199
|
+
<div class="text-sm text-gray-600">Tight spacing, compact elements</div>
|
|
200
|
+
</div>
|
|
201
|
+
</div>
|
|
202
|
+
</div>
|
|
203
|
+
|
|
204
|
+
<div class="p-4 bg-white rounded-md shadow-md">
|
|
205
|
+
<div class="flex items-center">
|
|
206
|
+
<div class="bg-primary w-16 h-16"></div>
|
|
207
|
+
<div class="ml-4">
|
|
208
|
+
<div class="font-medium">Medium (16px / 1rem)</div>
|
|
209
|
+
<div class="text-sm text-gray-600">Standard spacing, form fields</div>
|
|
210
|
+
</div>
|
|
211
|
+
</div>
|
|
212
|
+
</div>
|
|
213
|
+
|
|
214
|
+
<div class="p-4 bg-white rounded-md shadow-md">
|
|
215
|
+
<div class="flex items-center">
|
|
216
|
+
<div class="bg-primary w-24 h-24"></div>
|
|
217
|
+
<div class="ml-4">
|
|
218
|
+
<div class="font-medium">Large (24px / 1.5rem)</div>
|
|
219
|
+
<div class="text-sm text-gray-600">Section padding, card padding</div>
|
|
220
|
+
</div>
|
|
221
|
+
</div>
|
|
222
|
+
</div>
|
|
223
|
+
|
|
224
|
+
<div class="p-4 bg-white rounded-md shadow-md">
|
|
225
|
+
<div class="flex items-center">
|
|
226
|
+
<div class="bg-primary w-32 h-32"></div>
|
|
227
|
+
<div class="ml-4">
|
|
228
|
+
<div class="font-medium">XL (32px / 2rem)</div>
|
|
229
|
+
<div class="text-sm text-gray-600">Section margins, page padding</div>
|
|
230
|
+
</div>
|
|
231
|
+
</div>
|
|
232
|
+
</div>
|
|
233
|
+
</div>
|
|
234
|
+
</div>
|
|
235
|
+
</section>
|
|
236
|
+
|
|
237
|
+
<!-- Components Section -->
|
|
238
|
+
<section id="components" class="mb-16">
|
|
239
|
+
<h2 class="text-2xl font-bold mb-6 pb-2 border-b">Components</h2>
|
|
240
|
+
|
|
241
|
+
<!-- Buttons -->
|
|
242
|
+
<div class="mb-12">
|
|
243
|
+
<h3 class="text-xl font-semibold mb-4">Buttons</h3>
|
|
244
|
+
<div class="p-6 bg-white rounded-md shadow-md">
|
|
245
|
+
<div class="flex flex-wrap gap-4">
|
|
246
|
+
<button class="px-6 py-2 bg-primary hover:bg-primary-hover active:bg-primary-active text-white font-medium rounded">
|
|
247
|
+
Primary Button
|
|
248
|
+
</button>
|
|
249
|
+
|
|
250
|
+
<button class="px-6 py-2 border border-primary text-primary hover:bg-blue-50 font-medium rounded">
|
|
251
|
+
Secondary Button
|
|
252
|
+
</button>
|
|
253
|
+
|
|
254
|
+
<button class="px-6 py-2 bg-error hover:bg-red-600 text-white font-medium rounded">
|
|
255
|
+
Danger Button
|
|
256
|
+
</button>
|
|
257
|
+
|
|
258
|
+
<button class="px-4 py-2 text-primary hover:underline font-medium">
|
|
259
|
+
Text Button
|
|
260
|
+
</button>
|
|
261
|
+
|
|
262
|
+
<button class="px-6 py-2 bg-gray-300 text-gray-500 font-medium rounded cursor-not-allowed" disabled>
|
|
263
|
+
Disabled Button
|
|
264
|
+
</button>
|
|
265
|
+
</div>
|
|
266
|
+
</div>
|
|
267
|
+
</div>
|
|
268
|
+
|
|
269
|
+
<!-- Form Inputs -->
|
|
270
|
+
<div class="mb-12">
|
|
271
|
+
<h3 class="text-xl font-semibold mb-4">Form Inputs</h3>
|
|
272
|
+
<div class="p-6 bg-white rounded-md shadow-md space-y-6">
|
|
273
|
+
<div>
|
|
274
|
+
<label for="text-input" class="block text-sm font-medium text-gray-700 mb-1">Text Input</label>
|
|
275
|
+
<input type="text" id="text-input" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary" placeholder="Enter text here">
|
|
276
|
+
</div>
|
|
277
|
+
|
|
278
|
+
<div>
|
|
279
|
+
<label for="textarea" class="block text-sm font-medium text-gray-700 mb-1">Textarea</label>
|
|
280
|
+
<textarea id="textarea" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary" placeholder="Enter longer text here"></textarea>
|
|
281
|
+
</div>
|
|
282
|
+
|
|
283
|
+
<div>
|
|
284
|
+
<label for="select" class="block text-sm font-medium text-gray-700 mb-1">Select Dropdown</label>
|
|
285
|
+
<select id="select" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary">
|
|
286
|
+
<option value="" disabled selected>Select an option</option>
|
|
287
|
+
<option value="option1">Option 1</option>
|
|
288
|
+
<option value="option2">Option 2</option>
|
|
289
|
+
<option value="option3">Option 3</option>
|
|
290
|
+
</select>
|
|
291
|
+
</div>
|
|
292
|
+
|
|
293
|
+
<div class="flex items-center">
|
|
294
|
+
<input id="checkbox" type="checkbox" class="h-4 w-4 text-primary border-gray-300 rounded focus:ring-primary">
|
|
295
|
+
<label for="checkbox" class="ml-2 block text-sm text-gray-700">Checkbox</label>
|
|
296
|
+
</div>
|
|
297
|
+
|
|
298
|
+
<div class="flex items-center">
|
|
299
|
+
<input id="radio" type="radio" name="radio-group" class="h-4 w-4 text-primary border-gray-300 focus:ring-primary">
|
|
300
|
+
<label for="radio" class="ml-2 block text-sm text-gray-700">Radio Button</label>
|
|
301
|
+
</div>
|
|
302
|
+
</div>
|
|
303
|
+
</div>
|
|
304
|
+
|
|
305
|
+
<!-- Cards -->
|
|
306
|
+
<div class="mb-12">
|
|
307
|
+
<h3 class="text-xl font-semibold mb-4">Cards</h3>
|
|
308
|
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
309
|
+
<div class="bg-white p-6 rounded-md shadow-md">
|
|
310
|
+
<h3 class="font-medium text-lg mb-2">Standard Card</h3>
|
|
311
|
+
<p class="text-gray-600">This is a basic card with some content. It has standard padding and shadow.</p>
|
|
312
|
+
</div>
|
|
313
|
+
|
|
314
|
+
<div class="bg-white p-6 rounded-md shadow-md transition duration-200 hover:shadow-lg cursor-pointer">
|
|
315
|
+
<h3 class="font-medium text-lg mb-2">Interactive Card</h3>
|
|
316
|
+
<p class="text-gray-600">This card has hover effects for interactive elements. Try hovering over it.</p>
|
|
317
|
+
</div>
|
|
318
|
+
|
|
319
|
+
<div class="bg-white p-6 rounded-md shadow-md border-l-4 border-primary">
|
|
320
|
+
<div class="flex items-center mb-4">
|
|
321
|
+
<div class="bg-primary h-10 w-10 rounded-full flex items-center justify-center text-white">
|
|
322
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
323
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
324
|
+
</svg>
|
|
325
|
+
</div>
|
|
326
|
+
<h3 class="font-medium text-lg ml-3">Feature Card</h3>
|
|
327
|
+
</div>
|
|
328
|
+
<p class="text-gray-600">This is a feature card with an icon and accent border to make it stand out.</p>
|
|
329
|
+
</div>
|
|
330
|
+
</div>
|
|
331
|
+
</div>
|
|
332
|
+
|
|
333
|
+
<!-- Modal (Flowbite) -->
|
|
334
|
+
<div class="mb-12">
|
|
335
|
+
<h3 class="text-xl font-semibold mb-4">Modal (Using Flowbite)</h3>
|
|
336
|
+
<div class="p-6 bg-white rounded-md shadow-md">
|
|
337
|
+
<button data-modal-target="default-modal" data-modal-toggle="default-modal" class="px-6 py-2 bg-primary hover:bg-primary-hover text-white font-medium rounded">
|
|
338
|
+
Open Modal
|
|
339
|
+
</button>
|
|
340
|
+
|
|
341
|
+
<!-- Modal -->
|
|
342
|
+
<div id="default-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
|
|
343
|
+
<div class="relative p-4 w-full max-w-2xl max-h-full">
|
|
344
|
+
<!-- Modal content -->
|
|
345
|
+
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
|
|
346
|
+
<!-- Modal header -->
|
|
347
|
+
<div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
|
|
348
|
+
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
|
|
349
|
+
Modal Title
|
|
350
|
+
</h3>
|
|
351
|
+
<button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="default-modal">
|
|
352
|
+
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
|
|
353
|
+
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
|
|
354
|
+
</svg>
|
|
355
|
+
<span class="sr-only">Close modal</span>
|
|
356
|
+
</button>
|
|
357
|
+
</div>
|
|
358
|
+
<!-- Modal body -->
|
|
359
|
+
<div class="p-4 md:p-5 space-y-4">
|
|
360
|
+
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
|
|
361
|
+
This is a Flowbite modal component that requires JavaScript. It's used for displaying content that requires user attention or interaction.
|
|
362
|
+
</p>
|
|
363
|
+
</div>
|
|
364
|
+
<!-- Modal footer -->
|
|
365
|
+
<div class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
|
|
366
|
+
<button data-modal-hide="default-modal" type="button" class="text-white bg-primary hover:bg-primary-hover focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Confirm</button>
|
|
367
|
+
<button data-modal-hide="default-modal" type="button" class="ms-3 text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10">Cancel</button>
|
|
368
|
+
</div>
|
|
369
|
+
</div>
|
|
370
|
+
</div>
|
|
371
|
+
</div>
|
|
372
|
+
</div>
|
|
373
|
+
</div>
|
|
374
|
+
</section>
|
|
375
|
+
</main>
|
|
376
|
+
|
|
377
|
+
<footer class="bg-white shadow-inner border-t border-gray-200 py-8">
|
|
378
|
+
<div class="container mx-auto px-4 text-center text-gray-600">
|
|
379
|
+
<p>Design System Styleguide based on Tailwind CSS and Flowbite</p>
|
|
380
|
+
</div>
|
|
381
|
+
</footer>
|
|
382
|
+
|
|
383
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.0/flowbite.min.js"></script>
|
|
384
|
+
</body>
|
|
385
|
+
</html>
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
# 2. User Stories
|
|
2
|
+
|
|
3
|
+
This directory contains user stories that define the functionality of the product from the user's perspective.
|
|
4
|
+
|
|
5
|
+
## Purpose
|
|
6
|
+
|
|
7
|
+
User stories capture what users need to accomplish with the product, focusing on the value they receive. They break down epics into manageable pieces of work that can be estimated and prioritized.
|
|
8
|
+
|
|
9
|
+
## Files in this Directory
|
|
10
|
+
|
|
11
|
+
- **example.md**: An example of a completed user story to reference
|
|
12
|
+
- Individual user story files (e.g., **login.md**)
|
|
13
|
+
|
|
14
|
+
## How to Use
|
|
15
|
+
|
|
16
|
+
1. Start by reviewing the features in [prd.md](../1_big-picture/prd.md)
|
|
17
|
+
2. Create a new user story file for each distinct piece of functionality
|
|
18
|
+
3. Reference example.md to see how to properly format a user story
|
|
19
|
+
4. After you create a user story, add a link to it in the appropriate feature in the [prd.md](../1_big-picture/prd.md) file
|
|
20
|
+
|
|
21
|
+
## Best Practices
|
|
22
|
+
|
|
23
|
+
- Start with the MVP version of the feature - smallest possible, easiest to build, and simplest to test!
|
|
24
|
+
|
|
25
|
+
## Next Steps
|
|
26
|
+
|
|
27
|
+
After completing user stories, move on to [3_design-system](../3_design-sytem) to create the front-end user interface.
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
# User Story: Reset Password
|
|
2
|
+
|
|
3
|
+
## Overview
|
|
4
|
+
|
|
5
|
+
**As a** registered user,
|
|
6
|
+
**I want** to be able to reset my password if I forget it,
|
|
7
|
+
**So that** I can regain access to my account without contacting support.
|
|
8
|
+
|
|
9
|
+
## Flowchart
|
|
10
|
+
```mermaid
|
|
11
|
+
flowchart TD
|
|
12
|
+
HomePage --> LoginPage
|
|
13
|
+
LoginPage --> ForgotPasswordPage
|
|
14
|
+
ForgotPasswordPage --> ResetPasswordEmail
|
|
15
|
+
ResetPasswordEmail --> ResetPasswordPage
|
|
16
|
+
ResetPasswordPage --> Dashboard
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Acceptance Criteria
|
|
20
|
+
|
|
21
|
+
1. User can request a password reset from the login page
|
|
22
|
+
2. System sends a password reset email with a secure, time-limited token
|
|
23
|
+
3. User can create a new password after clicking the reset link
|
|
24
|
+
4. New password must meet security requirements (8+ chars, 1 uppercase, 1 number)
|
|
25
|
+
5. User receives confirmation after successful password reset and is automatically logged in
|
|
26
|
+
6. Reset links expire after x hours
|
|
27
|
+
|
|
28
|
+
## Pages, Major Components, and Forms
|
|
29
|
+
|
|
30
|
+
### Forgot Password Page
|
|
31
|
+
**Form**:
|
|
32
|
+
- Email:
|
|
33
|
+
- Required
|
|
34
|
+
- Validate email format
|
|
35
|
+
- Submit Button
|
|
36
|
+
|
|
37
|
+
### Password Reset Email
|
|
38
|
+
- Link to reset password with token
|
|
39
|
+
|
|
40
|
+
### Reset Password Page
|
|
41
|
+
Page for users to set their new password. App will validate the token exists and is not expired and pull the appropriate user record.
|
|
42
|
+
|
|
43
|
+
**Form**:
|
|
44
|
+
- New Password:
|
|
45
|
+
- Required
|
|
46
|
+
- Validate: 8 characters, 1 upper, 1 special character
|
|
47
|
+
- Confirm New Password
|
|
48
|
+
- Validate: Matches new password
|
|
49
|
+
- Submit Button
|
|
50
|
+
|
|
51
|
+
### Dashboard
|
|
52
|
+
After resetting password user should be logged in and lands on the dashbard where they see a toast message confirming successful password reset
|
|
53
|
+
|
|
54
|
+
## Additional Notes & Assumptions
|
|
55
|
+
|
|
56
|
+
- User must be logged out to access the password reset link
|
|
57
|
+
- Only registered users can request a password reset
|
|
58
|
+
|
|
59
|
+
## Outstanding Questions
|
|
60
|
+
|
|
61
|
+
- [ ] What is the maximum duration for the password reset token?
|
|
62
|
+
|
|
63
|
+
## Developer Notes
|
|
64
|
+
|
|
65
|
+
- [ ] Will need to configure Devise to allow users to reset their passwords
|
|
66
|
+
|
|
67
|
+
## Data Migrations
|
|
68
|
+
|
|
69
|
+
```ruby
|
|
70
|
+
create_table :users do |t|
|
|
71
|
+
t.string :email, null: false
|
|
72
|
+
# ... more fields
|
|
73
|
+
t.timestamps
|
|
74
|
+
end
|
|
75
|
+
add_index :users, :email, unique: true
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## 3rd Party Dependencies (apis, gems, and libraries)
|
|
79
|
+
|
|
80
|
+
### Devise
|
|
81
|
+
- **Purpose**: Using Devise for auth in this application, so password reset will be handled via Devise.
|
|
82
|
+
- **Documentation to Review**: github.com/devise
|
|
83
|
+
- **Notes**: will use the view generators and customize the views from there
|
data/lib/nova.rb
ADDED
metadata
ADDED
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
|
+
name: nova-cli
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
version: 0.1.0
|
|
5
|
+
platform: ruby
|
|
6
|
+
authors:
|
|
7
|
+
- Ryan Francis
|
|
8
|
+
bindir: bin
|
|
9
|
+
cert_chain: []
|
|
10
|
+
date: 1980-01-02 00:00:00.000000000 Z
|
|
11
|
+
dependencies:
|
|
12
|
+
- !ruby/object:Gem::Dependency
|
|
13
|
+
name: rspec
|
|
14
|
+
requirement: !ruby/object:Gem::Requirement
|
|
15
|
+
requirements:
|
|
16
|
+
- - "~>"
|
|
17
|
+
- !ruby/object:Gem::Version
|
|
18
|
+
version: '3.0'
|
|
19
|
+
type: :development
|
|
20
|
+
prerelease: false
|
|
21
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
22
|
+
requirements:
|
|
23
|
+
- - "~>"
|
|
24
|
+
- !ruby/object:Gem::Version
|
|
25
|
+
version: '3.0'
|
|
26
|
+
description: Nova is a command-line tool that generates a standardized project structure
|
|
27
|
+
for product development and documentation. It guides teams through a structured
|
|
28
|
+
workflow from strategic planning to code generation in an AI-driven environment.
|
|
29
|
+
email:
|
|
30
|
+
- ryan@launchpadlab.com
|
|
31
|
+
executables:
|
|
32
|
+
- nova
|
|
33
|
+
extensions: []
|
|
34
|
+
extra_rdoc_files: []
|
|
35
|
+
files:
|
|
36
|
+
- README.md
|
|
37
|
+
- bin/nova
|
|
38
|
+
- lib/nova.rb
|
|
39
|
+
- lib/nova/cli.rb
|
|
40
|
+
- lib/nova/generator.rb
|
|
41
|
+
- lib/nova/templates/big_picture_readme_template.md
|
|
42
|
+
- lib/nova/templates/design_decisions_example.md
|
|
43
|
+
- lib/nova/templates/design_system_readme_template.md
|
|
44
|
+
- lib/nova/templates/flowchart_template.md
|
|
45
|
+
- lib/nova/templates/prd_example_template.md
|
|
46
|
+
- lib/nova/templates/prompts_example.md
|
|
47
|
+
- lib/nova/templates/prompts_examples/01_generate_app.md
|
|
48
|
+
- lib/nova/templates/prompts_examples/02_generate_styleguide.md
|
|
49
|
+
- lib/nova/templates/prompts_examples/03_generate_static_pages.md
|
|
50
|
+
- lib/nova/templates/prompts_examples/04_authentication_feature.md
|
|
51
|
+
- lib/nova/templates/prompts_readme_template.md
|
|
52
|
+
- lib/nova/templates/readme_template.md
|
|
53
|
+
- lib/nova/templates/styleguide_index.html
|
|
54
|
+
- lib/nova/templates/user_stories_readme_template.md
|
|
55
|
+
- lib/nova/templates/user_story_example.md
|
|
56
|
+
homepage: https://github.com/launchpadlab/nova-cli
|
|
57
|
+
licenses:
|
|
58
|
+
- MIT
|
|
59
|
+
metadata: {}
|
|
60
|
+
rdoc_options: []
|
|
61
|
+
require_paths:
|
|
62
|
+
- lib
|
|
63
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
64
|
+
requirements:
|
|
65
|
+
- - ">="
|
|
66
|
+
- !ruby/object:Gem::Version
|
|
67
|
+
version: 2.6.0
|
|
68
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
69
|
+
requirements:
|
|
70
|
+
- - ">="
|
|
71
|
+
- !ruby/object:Gem::Version
|
|
72
|
+
version: '0'
|
|
73
|
+
requirements: []
|
|
74
|
+
rubygems_version: 3.6.7
|
|
75
|
+
specification_version: 4
|
|
76
|
+
summary: A CLI tool for bringing product documentation and development together
|
|
77
|
+
test_files: []
|