nova-cli 0.1.1 → 0.2.1
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 +4 -4
- data/README.md +62 -48
- data/lib/nova/generator.rb +26 -43
- data/lib/nova/templates/nova.mdc +62 -0
- data/lib/nova/templates/readme_template.md +49 -41
- data/lib/nova/templates/tasks_examples/1_generate_application.md +75 -0
- data/lib/nova/templates/tasks_examples/2_generate_static_pages.md +157 -0
- data/lib/nova/templates/user_story_example.md +59 -67
- data/lib/nova/templates/windsurfrules_template.txt +1 -0
- data/lib/nova.rb +1 -1
- metadata +6 -12
- data/lib/nova/templates/big_picture_readme_template.md +0 -29
- data/lib/nova/templates/design_system_readme_template.md +0 -22
- data/lib/nova/templates/prompts_example.md +0 -134
- data/lib/nova/templates/prompts_examples/01_generate_app.md +0 -94
- data/lib/nova/templates/prompts_examples/02_generate_styleguide.md +0 -26
- data/lib/nova/templates/prompts_examples/03_generate_static_pages.md +0 -26
- data/lib/nova/templates/prompts_examples/04_authentication_feature.md +0 -41
- data/lib/nova/templates/prompts_readme_template.md +0 -27
- data/lib/nova/templates/styleguide_index.html +0 -385
- data/lib/nova/templates/user_stories_readme_template.md +0 -27
- /data/lib/nova/templates/{flowchart_template.md → flowchart_example_template.md} +0 -0
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
# Generate Static Front-end Pages
|
|
2
|
-
|
|
3
|
-
This prompt is for creating the static front-end pages based on the design system, user stories, PRD, and flowchart.
|
|
4
|
-
|
|
5
|
-
## Task Description
|
|
6
|
-
|
|
7
|
-
Implement the core static front-end pages for the application using the design system styleguide as a reference.
|
|
8
|
-
|
|
9
|
-
Using the design system styleguide and flowchart from the big picture directory, implement the following pages:
|
|
10
|
-
- Create the main pages defined in the flowchart
|
|
11
|
-
- Implement layouts using Tailwind CSS classes consistent with the styleguide
|
|
12
|
-
- Add Flowbite components for interactive elements
|
|
13
|
-
- Ensure all pages are responsive and follow the design patterns
|
|
14
|
-
|
|
15
|
-
For each page:
|
|
16
|
-
- Include proper routing
|
|
17
|
-
- Set up navigation between pages
|
|
18
|
-
- Create placeholder content where dynamic data will eventually be used
|
|
19
|
-
- Implement form structures (without actual functionality yet)
|
|
20
|
-
- Connect the pages with a consistent navigation structure as defined in the flowchart
|
|
21
|
-
|
|
22
|
-
## Related Artifacts
|
|
23
|
-
- [PRD](../1_big-picture/prd.md)
|
|
24
|
-
- [Design System](../3_design-system/design_decisions.md)
|
|
25
|
-
- [Flowchart](../1_big-picture/flowchart.md)
|
|
26
|
-
- [User Stories](../2_user-stories/)
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
# Authentication Feature Implementation
|
|
2
|
-
|
|
3
|
-
This prompt is for implementing the authentication system for the application.
|
|
4
|
-
|
|
5
|
-
## Task Description
|
|
6
|
-
|
|
7
|
-
Implement a complete user authentication system with registration, login, password reset, and role-based permissions using Devise.
|
|
8
|
-
|
|
9
|
-
### Steps
|
|
10
|
-
|
|
11
|
-
1. Add and configure Devise gem for Rails authentication:
|
|
12
|
-
- Install Devise
|
|
13
|
-
- Generate User model with appropriate attributes
|
|
14
|
-
- Configure Devise modules (registerable, recoverable, rememberable, validatable)
|
|
15
|
-
- Set up role-based authorization
|
|
16
|
-
|
|
17
|
-
2. Customize authentication views to match the application design:
|
|
18
|
-
- Override Devise default views
|
|
19
|
-
- Apply the design system styles from the styleguide
|
|
20
|
-
- Implement form validations with appropriate error messages
|
|
21
|
-
|
|
22
|
-
3. Implement additional authentication features:
|
|
23
|
-
- Email verification
|
|
24
|
-
- Password reset flow
|
|
25
|
-
- Remember me functionality
|
|
26
|
-
- Session management
|
|
27
|
-
|
|
28
|
-
4. Add role-based access controls:
|
|
29
|
-
- Create role-based permissions system
|
|
30
|
-
- Implement policies for different user types
|
|
31
|
-
- Add authorization checks to controllers and views
|
|
32
|
-
|
|
33
|
-
5. Create user profile management:
|
|
34
|
-
- Profile editing functionality
|
|
35
|
-
- Account settings
|
|
36
|
-
- Password change forms
|
|
37
|
-
|
|
38
|
-
## Related Artifacts
|
|
39
|
-
- [Authentication Requirements](../1_big-picture/prd.md#authentication)
|
|
40
|
-
- [User Flow](../1_big-picture/flowchart.md#authentication-flow)
|
|
41
|
-
- [Design System](../3_design-system/design_decisions.md)
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
# Development Prompts
|
|
2
|
-
|
|
3
|
-
This directory contains a list of development prompts for implementing your application based on the planning documents.
|
|
4
|
-
|
|
5
|
-
## Purpose
|
|
6
|
-
|
|
7
|
-
Development prompts help create a logical sequence for building your application, making it easier to communicate implementation needs to developers or AI assistants.
|
|
8
|
-
|
|
9
|
-
## How to Use
|
|
10
|
-
|
|
11
|
-
1. Create separate prompt files for each major development phase:
|
|
12
|
-
- `01_generate_app.md` - Initial application setup with core dependencies
|
|
13
|
-
- `02_generate_styleguide.md` - Design system implementation
|
|
14
|
-
- `03_generate_static_pages.md` - Core pages based on the flowchart in the big picture directory
|
|
15
|
-
- Feature-specific prompts (e.g., `04_authentication.md`, `05_dashboard.md`, etc.)
|
|
16
|
-
2. For each prompt file:
|
|
17
|
-
- Follow the structure in the examples directory
|
|
18
|
-
- Reference the PRD for technology stack guidance and requirements
|
|
19
|
-
- Link relevant artifacts within each prompt so that the AI Agent can understand the context and dependencies
|
|
20
|
-
3. When ready to implement, use each prompt file individually with the AI Agent
|
|
21
|
-
4. If an issue occurs during the implementation, work with the AI Agent to correct the documentation and prompt, then re-prompt the AI Agent
|
|
22
|
-
|
|
23
|
-
Note: for 01_generate_app, 02_generate_styleguide, and 03_generate_static_pages prompts, follow the examples provided exactly unless the user explicitly tells you otherwise.
|
|
24
|
-
|
|
25
|
-
## Example
|
|
26
|
-
|
|
27
|
-
See `prompts_example.md` in this directory for an example of how to structure your development task list.
|
|
@@ -1,385 +0,0 @@
|
|
|
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>
|
|
@@ -1,27 +0,0 @@
|
|
|
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.
|
|
File without changes
|