From 120344614308a866251a6c0b3c66acaec3a1f4d2 Mon Sep 17 00:00:00 2001
From: Driss Chelouati <driss.chelouati@gmail.com>
Date: Thu, 7 Dec 2023 09:50:15 +0100
Subject: [PATCH] feat(Heading): config redesign and implementation

---
 .../components/heading/heading.config.ts      | 54 ++++++++++---------
 src/plugins/components/heading/index.ts       | 52 +++++++++---------
 2 files changed, 57 insertions(+), 49 deletions(-)

diff --git a/src/plugins/components/heading/heading.config.ts b/src/plugins/components/heading/heading.config.ts
index 6c996a5..964a559 100644
--- a/src/plugins/components/heading/heading.config.ts
+++ b/src/plugins/components/heading/heading.config.ts
@@ -1,30 +1,36 @@
 export const key = 'heading' as const
 
 export const defaultConfig = {
-  textXS: 'xs',
-  textSM: 'sm',
-  textMD: 'base',
-  textLG: 'lg',
-  textXL: 'xl',
-  text2XL: '2xl',
-  text3XL: '3xl',
-  text4XL: '4xl',
-  text5XL: '5xl',
-  text6XL: '6xl',
-  text7XL: '7xl',
-  text8XL: '8xl',
-  text9XL: '9xl',
-  textLight: 'light',
-  textNormal: 'normal',
-  textMedium: 'medium',
-  textSemibold: 'semibold',
-  textBold: 'bold',
-  textExtrabold: 'extrabold',
-  textLeadNone: 'none',
-  textLeadNormal: 'normal',
-  textLeadTight: 'tight',
-  textLeadSnug: 'snug',
-  textLeadLoose: 'loose',
+  size: {
+    xs: 'xs',
+    sm: 'sm',
+    md: 'base',
+    lg: 'lg',
+    xl: 'xl',
+    xxl: '2xl',
+    xxxl: '3xl',
+    xxxxl: '4xl',
+    xxxxxl: '5xl',
+    xxxxxxl: '6xl',
+    xxxxxxxl: '7xl',
+    xxxxxxxxl: '8xl',
+    xxxxxxxxxl: '9xl',
+  },
+  weight: {
+    light: 'light',
+    normal: 'normal',
+    medium: 'medium',
+    semibold: 'semibold',
+    bold: 'bold',
+    extrabold: 'extrabold',
+  },
+  lead: {
+    none: 'none',
+    normal: 'normal',
+    tight: 'tight',
+    snug: 'snug',
+    loose: 'loose',
+  },
 }
 
 export type HeadingConfig = typeof defaultConfig
diff --git a/src/plugins/components/heading/index.ts b/src/plugins/components/heading/index.ts
index 522a43b..10c98fd 100644
--- a/src/plugins/components/heading/index.ts
+++ b/src/plugins/components/heading/index.ts
@@ -17,78 +17,80 @@ export default plugin.withOptions(
       addComponents({
         [`.${prefix}heading`]: {
           [`@apply font-sans`]: {},
-
+          //size
           [`&.${prefix}heading-xs`]: {
-            [`@apply text-${config.textXS}`]: {},
+            [`@apply text-${config.size.xs}`]: {},
           },
           [`&.${prefix}heading-sm`]: {
-            [`@apply text-${config.textSM}`]: {},
+            [`@apply text-${config.size.sm}`]: {},
           },
           [`&.${prefix}heading-md`]: {
-            [`@apply text-${config.textMD}`]: {},
+            [`@apply text-${config.size.md}`]: {},
           },
           [`&.${prefix}heading-lg`]: {
-            [`@apply text-${config.textLG}`]: {},
+            [`@apply text-${config.size.lg}`]: {},
           },
           [`&.${prefix}heading-xl`]: {
-            [`@apply text-${config.textXL}`]: {},
+            [`@apply text-${config.size.xl}`]: {},
           },
           [`&.${prefix}heading-2xl`]: {
-            [`@apply text-${config.text2XL}`]: {},
+            [`@apply text-${config.size.xxl}`]: {},
           },
           [`&.${prefix}heading-3xl`]: {
-            [`@apply text-${config.text3XL}`]: {},
+            [`@apply text-${config.size.xxxl}`]: {},
           },
           [`&.${prefix}heading-4xl`]: {
-            [`@apply text-${config.text4XL}`]: {},
+            [`@apply text-${config.size.xxxxl}`]: {},
           },
           [`&.${prefix}heading-5xl`]: {
-            [`@apply text-${config.text5XL}`]: {},
+            [`@apply text-${config.size.xxxxxl}`]: {},
           },
           [`&.${prefix}heading-6xl`]: {
-            [`@apply text-${config.text6XL}`]: {},
+            [`@apply text-${config.size.xxxxxxl}`]: {},
           },
           [`&.${prefix}heading-7xl`]: {
-            [`@apply text-${config.text7XL}`]: {},
+            [`@apply text-${config.size.xxxxxxxl}`]: {},
           },
           [`&.${prefix}heading-8xl`]: {
-            [`@apply text-${config.text8XL}`]: {},
+            [`@apply text-${config.size.xxxxxxxxl}`]: {},
           },
           [`&.${prefix}heading-9xl`]: {
-            [`@apply text-${config.text9XL}`]: {},
+            [`@apply text-${config.size.xxxxxxxxxl}`]: {},
           },
+          //Weight
           [`&.${prefix}weight-light`]: {
-            [`@apply font-${config.textLight}`]: {},
+            [`@apply font-${config.weight.light}`]: {},
           },
           [`&.${prefix}weight-normal`]: {
-            [`@apply font-${config.textNormal}`]: {},
+            [`@apply font-${config.weight.normal}`]: {},
           },
           [`&.${prefix}weight-medium`]: {
-            [`@apply font-${config.textMedium}`]: {},
+            [`@apply font-${config.weight.medium}`]: {},
           },
           [`&.${prefix}weight-semibold`]: {
-            [`@apply font-${config.textSemibold}`]: {},
+            [`@apply font-${config.weight.semibold}`]: {},
           },
           [`&.${prefix}weight-bold`]: {
-            [`@apply font-${config.textBold}`]: {},
+            [`@apply font-${config.weight.bold}`]: {},
           },
           [`&.${prefix}weight-extrabold`]: {
-            [`@apply font-${config.textExtrabold}`]: {},
+            [`@apply font-${config.weight.extrabold}`]: {},
           },
+          //Lead
           [`&.${prefix}lead-none`]: {
-            [`@apply leading-${config.textLeadNone}`]: {},
+            [`@apply leading-${config.lead.none}`]: {},
           },
           [`&.${prefix}lead-normal`]: {
-            [`@apply leading-${config.textLeadNormal}`]: {},
+            [`@apply leading-${config.lead.normal}`]: {},
           },
           [`&.${prefix}lead-tight`]: {
-            [`@apply leading-${config.textLeadTight}`]: {},
+            [`@apply leading-${config.lead.tight}`]: {},
           },
           [`&.${prefix}lead-snug`]: {
-            [`@apply leading-${config.textLeadSnug}`]: {},
+            [`@apply leading-${config.lead.snug}`]: {},
           },
           [`&.${prefix}lead-loose`]: {
-            [`@apply leading-${config.textLeadLoose}`]: {},
+            [`@apply leading-${config.lead.loose}`]: {},
           },
         },
       })