From d0511d75397cfdf89ddb73c047b3152634ce7cf0 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 14 Dec 2024 11:09:33 +0300
Subject: [PATCH] Refactored component tokens visual impl

---
 .../designer/component/DesignComponent.vue    |  6 ++---
 .../component/DesignComponentSection.vue      | 25 ++++++-------------
 2 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/apps/showcase/components/layout/designer/component/DesignComponent.vue b/apps/showcase/components/layout/designer/component/DesignComponent.vue
index ae1181351..b1374bd6c 100644
--- a/apps/showcase/components/layout/designer/component/DesignComponent.vue
+++ b/apps/showcase/components/layout/designer/component/DesignComponent.vue
@@ -2,7 +2,7 @@
     <section class="flex flex-col gap-3">
         <div class="text-lg font-semibold capitalize">{{ componentKey }}</div>
         <template v-for="(value, name) in tokens" :key="name">
-            <DesignComponentSection v-if="name !== 'colorScheme'" :componentKey="componentKey" :name="name" />
+            <DesignComponentSection v-if="name !== 'colorScheme'" :componentKey="componentKey" :path="name" />
         </template>
         <Tabs v-if="hasColorScheme" value="cs-0">
             <TabList>
@@ -12,12 +12,12 @@
             <TabPanels class="!px-0">
                 <TabPanel value="cs-0">
                     <div class="flex flex-col gap-3">
-                        <DesignComponentSection v-for="(value, name) in lightTokens" :key="name" :componentKey="componentKey" :name="name" colorScheme="light" />
+                        <DesignComponentSection v-for="(value, name) in lightTokens" :key="name" :componentKey="componentKey" :path="'colorScheme.light.' + name" />
                     </div>
                 </TabPanel>
                 <TabPanel value="cs-1">
                     <div class="flex flex-col gap-3">
-                        <DesignComponentSection v-for="(value, name) in darkTokens" :key="name" :componentKey="componentKey" :name="name" colorScheme="dark" />
+                        <DesignComponentSection v-for="(value, name) in darkTokens" :key="name" :componentKey="componentKey" :path="'colorScheme.dark.' + name" />
                     </div>
                 </TabPanel>
             </TabPanels>
diff --git a/apps/showcase/components/layout/designer/component/DesignComponentSection.vue b/apps/showcase/components/layout/designer/component/DesignComponentSection.vue
index 38b96d7dc..155395693 100644
--- a/apps/showcase/components/layout/designer/component/DesignComponentSection.vue
+++ b/apps/showcase/components/layout/designer/component/DesignComponentSection.vue
@@ -7,7 +7,7 @@
             </template>
         </div>
         <template v-if="hasNestedTokens">
-            <DesignComponentSection v-for="(n_value, n_name) in nestedTokens" :key="n_name" :componentKey="componentKey" :name="n_name" :parentPath="fullPath" class="mt-3" />
+            <DesignComponentSection v-for="(n_value, n_name) in nestedTokens" :key="n_name" :componentKey="componentKey" :path="path + '.' + n_name" class="mt-3" />
         </template>
     </section>
 </template>
@@ -19,15 +19,7 @@ export default {
             type: null,
             default: null
         },
-        name: {
-            type: null,
-            default: null
-        },
-        parentPath: {
-            type: null,
-            default: null
-        },
-        colorScheme: {
+        path: {
             type: null,
             default: null
         }
@@ -66,17 +58,16 @@ export default {
         }
     },
     computed: {
-        fullPath() {
-            return this.parentPath ? this.parentPath + '.' + this.name : this.name;
-        },
         sectionName() {
-            const names = this.fullPath.split('.');
+            const names = this.path.split('.');
 
-            return names.map((n) => this.capitalize(this.camelCaseToSpaces(n))).join(' ');
+            return names
+                .filter((n) => n !== 'colorScheme' && n !== 'light' && n !== 'dark')
+                .map((n) => this.capitalize(this.camelCaseToSpaces(n)))
+                .join(' ');
         },
         tokens() {
-            if (this.colorScheme) return this.getObjectProperty(this.$preset.components[this.componentKey].colorScheme[this.colorScheme], this.fullPath);
-            else return this.getObjectProperty(this.$preset.components[this.componentKey], this.fullPath);
+            return this.getObjectProperty(this.$preset.components[this.componentKey], this.path);
         },
         nestedTokens() {
             const groups = {};