From a80b9a2aaccf196e9e40687c29e3bd410426fd7b Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 28 May 2024 14:29:09 +0300
Subject: [PATCH] Update roadmap

---
 pages/roadmap/index.vue | 113 +++++++++++++++++++++-------------------
 1 file changed, 58 insertions(+), 55 deletions(-)

diff --git a/pages/roadmap/index.vue b/pages/roadmap/index.vue
index 5c50758bb..095587680 100644
--- a/pages/roadmap/index.vue
+++ b/pages/roadmap/index.vue
@@ -28,45 +28,54 @@
                         <div class="flex-shrink-0 p-4 bg-blue-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">COMPONENTS</div>
                         <div class="flex-1 flex gap-4 flex-col">
                             <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
-                                <h2 class="text-lg font-bold mt-0 mb-2">New Styled Mode</h2>
-                                <p class="mt-0 mb-4 leading-normal">Move theming into core to replace sass repo.</p>
+                                <h2 class="text-lg font-bold mt-0 mb-2">New Theming</h2>
+                                <p class="mt-0 mb-4 leading-normal">POC work for new theming.</p>
                                 <div class="bg-surface-200 rounded">
-                                    <div class="bg-blue-500 rounded" style="width: 25%; height: 4px"></div>
-                                </div>
-                            </div>
-                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
-                                <h2 class="text-lg font-bold mt-0 mb-2">CSS Variables</h2>
-                                <p class="mt-0 mb-4 leading-normal">Implement figma design tokens as CSS variables instead of SCSS.</p>
-                                <div class="bg-surface-200 rounded">
-                                    <div class="bg-blue-500 rounded" style="width: 25%; height: 4px"></div>
+                                    <div class="bg-blue-500 rounded" style="width: 100%; height: 4px"></div>
                                 </div>
                             </div>
                             <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
                                 <h2 class="text-lg font-bold mt-0 mb-2">Tailwind CSS Presets</h2>
                                 <p class="mt-0 mb-4 leading-normal">Provide presets for the entire UI suite.</p>
                                 <div class="bg-surface-200 rounded">
-                                    <div class="bg-blue-500 rounded" style="width: 50%; height: 4px"></div>
+                                    <div class="bg-blue-500 rounded" style="width: 100%; height: 4px"></div>
                                 </div>
                             </div>
                             <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
                                 <h2 class="text-lg font-bold mt-0 mb-2">New Components</h2>
-                                <p class="mt-0 mb-4 leading-normal">Layout components, Typography, Meter, Drawer, Content for Steps...</p>
+                                <p class="mt-0 mb-4 leading-normal">Meter, Drawer, Content for Stepper.</p>
                                 <div class="bg-surface-200 rounded">
-                                    <div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
+                                    <div class="bg-blue-500 rounded" style="width: 100%; height: 4px"></div>
                                 </div>
                             </div>
                             <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
                                 <h2 class="text-lg font-bold mt-0 mb-2">Form States</h2>
                                 <p class="mt-0 mb-4 leading-normal">Add filled and invalid props to form components.</p>
                                 <div class="bg-surface-200 rounded">
-                                    <div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
+                                    <div class="bg-blue-500 rounded" style="width: 100%; height: 4px"></div>
                                 </div>
                             </div>
                         </div>
                         <div class="flex-1 flex gap-4 flex-col">
                             <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
-                                <h2 class="text-lg font-bold mt-0 mb-2">RTL Mode</h2>
-                                <p class="mt-0 mb-4 leading-normal">RTL support for the UI components.</p>
+                                <h2 class="text-lg font-bold mt-0 mb-2">V4</h2>
+                                <p class="mt-0 mb-4 leading-normal">Next-Gen version with the new design token based theming.</p>
+                                <div class="bg-surface-200 rounded">
+                                    <div class="bg-blue-500 rounded" style="width: 100%; height: 4px"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="flex-1 flex gap-4 flex-col">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
+                                <h2 class="text-lg font-bold mt-0 mb-2">New Components</h2>
+                                <p class="mt-0 mb-4 leading-normal">Layout, Typography, Tab orientations, Navigation Drawer.</p>
+                                <div class="bg-surface-200 rounded">
+                                    <div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
+                                </div>
+                            </div>
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
+                                <h2 class="text-lg font-bold mt-0 mb-2">Form Library</h2>
+                                <p class="mt-0 mb-4 leading-normal">Built-in form library with validations.</p>
                                 <div class="bg-surface-200 rounded">
                                     <div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
                                 </div>
@@ -81,17 +90,8 @@
                         </div>
                         <div class="flex-1 flex gap-4 flex-col">
                             <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
-                                <h2 class="text-lg font-bold mt-0 mb-2">Advanced Components</h2>
-                                <p class="mt-0 mb-4 leading-normal">Sheet, Event Calendar.</p>
-                                <div class="bg-surface-200 rounded">
-                                    <div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="flex-1 flex gap-4 flex-col">
-                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
-                                <h2 class="text-lg font-bold mt-0 mb-2">Advanced Components</h2>
-                                <p class="mt-0 mb-4 leading-normal">Gantt Chart, Flow Chart.</p>
+                                <h2 class="text-lg font-bold mt-0 mb-2">Experimental Components</h2>
+                                <p class="mt-0 mb-4 leading-normal">Gantt Chart, Flow Chart, Sheet, Calendar.</p>
                                 <div class="bg-surface-200 rounded">
                                     <div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
                                 </div>
@@ -100,56 +100,58 @@
                     </div>
                     <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
                         <div class="flex-shrink-0 p-4 bg-indigo-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">Figma UI Kit</div>
+                        <div class="flex-1 flex gap-4 flex-col"></div>
                         <div class="flex-1 flex gap-4 flex-col">
                             <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-indigo-500 border-l-8">
-                                <h2 class="text-lg font-bold mt-0 mb-2">New Figma Tokens</h2>
+                                <h2 class="text-lg font-bold mt-0 mb-2">New Figma Tokens - Phase 1</h2>
                                 <p class="mt-0 mb-4 leading-normal">Update tokens to sync with the new styled mode.</p>
                                 <div class="bg-surface-200 rounded">
-                                    <div class="bg-indigo-500 rounded" style="width: 25%; height: 4px"></div>
+                                    <div class="bg-indigo-500 rounded" style="width: 50%; height: 4px"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="flex-1 flex gap-4 flex-col">
+                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-indigo-500 border-l-8">
+                                <h2 class="text-lg font-bold mt-0 mb-2">New Figma Tokens - Phase 2</h2>
+                                <p class="mt-0 mb-4 leading-normal">Update tokens to sync with the new styled mode.</p>
+                                <div class="bg-surface-200 rounded">
+                                    <div class="bg-indigo-500 rounded" style="width: 0%; height: 4px"></div>
                                 </div>
                             </div>
                             <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-indigo-500 border-l-8">
                                 <h2 class="text-lg font-bold mt-0 mb-2">Figma to Theme API</h2>
-                                <p class="mt-0 mb-4 leading-normal">Build the infrastructure to generate themes from Figma.</p>
+                                <p class="mt-0 mb-4 leading-normal">Build a Figma plugin to generate themes from UI Kit.</p>
                                 <div class="bg-surface-200 rounded">
                                     <div class="bg-indigo-500 rounded" style="width: 0%; height: 4px"></div>
                                 </div>
                             </div>
                         </div>
                         <div class="flex-1 flex gap-4 flex-col"></div>
-                        <div class="flex-1 flex gap-4 flex-col"></div>
-                        <div class="flex-1 flex gap-4 flex-col"></div>
                     </div>
                     <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
                         <div class="flex-shrink-0 p-4 bg-teal-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">SHOWCASE</div>
+                        <div class="flex-1 flex gap-4 flex-col"></div>
+                        <div class="flex-1 flex gap-4 flex-col"></div>
                         <div class="flex-1 flex gap-4 flex-col">
                             <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-teal-500 border-l-8">
                                 <h2 class="text-lg font-bold mt-0 mb-2">Documentation</h2>
-                                <p class="mt-0 mb-4 leading-normal">Add server backed data samples for data driven examples e.g. VirtualScroll, Lazy.</p>
+                                <p class="mt-0 mb-4 leading-normal">Interative component viewer to explore tokens and pt sections.</p>
                                 <div class="bg-surface-200 rounded">
                                     <div class="bg-teal-500 rounded" style="width: 0%; height: 4px"></div>
                                 </div>
                             </div>
                         </div>
                         <div class="flex-1 flex gap-4 flex-col"></div>
-                        <div class="flex-1 flex gap-4 flex-col"></div>
-                        <div class="flex-1 flex gap-4 flex-col"></div>
                     </div>
                     <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
                         <div class="flex-shrink-0 p-4 bg-orange-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">PrimeBlocks</div>
+                        <div class="flex-1 flex gap-4 flex-col"></div>
                         <div class="flex-1 flex gap-4 flex-col">
-                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500 border-l-8">
-                                <h2 class="text-lg font-bold mt-0 mb-2">Blocks Update</h2>
-                                <p class="mt-0 mb-4 leading-normal">Add 80+ New Blocks.</p>
-                                <div class="bg-surface-200 rounded">
-                                    <div class="bg-orange-500 rounded" style="width: 20%; height: 4px"></div>
-                                </div>
-                            </div>
                             <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500 border-l-8">
                                 <h2 class="text-lg font-bold mt-0 mb-2">Tailwind Blocks</h2>
-                                <p class="mt-0 mb-4 leading-normal">Port the entire Blocks to Tailwind.</p>
+                                <p class="mt-0 mb-4 leading-normal">Migrate Blocks to Tailwind CSS.</p>
                                 <div class="bg-surface-200 rounded">
-                                    <div class="bg-orange-500 rounded" style="width: 0%; height: 4px"></div>
+                                    <div class="bg-orange-500 rounded" style="width: 50%; height: 4px"></div>
                                 </div>
                             </div>
                         </div>
@@ -163,7 +165,6 @@
                             </div>
                         </div>
                         <div class="flex-1 flex gap-4 flex-col"></div>
-                        <div class="flex-1 flex gap-4 flex-col"></div>
                     </div>
                     <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
                         <div class="flex-shrink-0 p-4 bg-pink-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">Design</div>
@@ -172,20 +173,22 @@
                                 <h2 class="text-lg font-bold mt-0 mb-2">New UI Theme</h2>
                                 <p class="mt-0 mb-4 leading-normal">Brand new default theme with a modern and attractive design.</p>
                                 <div class="bg-surface-200 rounded">
-                                    <div class="bg-pink-500 rounded" style="width: 0%; height: 4px"></div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="flex-1 flex gap-4 flex-col">
-                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-pink-500 border-l-8">
-                                <h2 class="text-lg font-bold mt-0 mb-2">New UI Based Theme Editor</h2>
-                                <p class="mt-0 mb-4 leading-normal">Advanced Theme Editor App with full control over the new Styled Theming API.</p>
-                                <div class="bg-surface-200 rounded">
-                                    <div class="bg-pink-500 rounded" style="width: 0%; height: 4px"></div>
+                                    <div class="bg-pink-500 rounded" style="width: 100%; height: 4px"></div>
                                 </div>
                             </div>
                         </div>
                         <div class="flex-1 flex gap-4 flex-col"></div>
+                        <div class="flex-1 flex gap-4 flex-col">
+                            <div class="flex-1 flex gap-4 flex-col">
+                                <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-pink-500 border-l-8">
+                                    <h2 class="text-lg font-bold mt-0 mb-2">New UI Based Theme Editor</h2>
+                                    <p class="mt-0 mb-4 leading-normal">Advanced Theme Editor App with full control over the new Styled Theming API.</p>
+                                    <div class="bg-surface-200 rounded">
+                                        <div class="bg-pink-500 rounded" style="width: 0%; height: 4px"></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                         <div class="flex-1 flex gap-4 flex-col"></div>
                     </div>
                 </div>