From 14c313b7518f50f8ed3743f0fcf9cd1aa86669fb Mon Sep 17 00:00:00 2001
From: Driss Chelouati <driss.chelouati@gmail.com>
Date: Fri, 8 Dec 2023 14:21:26 +0100
Subject: [PATCH] feat(SwitchBall): config redesign and implementation

---
 src/plugins/components/switch-ball/index.ts   |  91 +++++++++++--
 .../switch-ball/switch-ball.config.ts         | 122 +++++++++++++-----
 2 files changed, 164 insertions(+), 49 deletions(-)

diff --git a/src/plugins/components/switch-ball/index.ts b/src/plugins/components/switch-ball/index.ts
index c2dda43..4e52b1b 100644
--- a/src/plugins/components/switch-ball/index.ts
+++ b/src/plugins/components/switch-ball/index.ts
@@ -15,72 +15,135 @@ export default plugin.withOptions(
       const config = theme(`shurikenUi.${key}`) satisfies SwitchBallConfig
 
       addComponents({
+        //Wrapper
         [`.${prefix}switch-ball`]: {
           [`@apply flex cursor-pointer items-center`]: {},
-
+          //Switch:outer
           [`.${prefix}switch-ball-outer`]: {
-            [`@apply ${prefix}focus relative block rounded-${config.handle.rounded}`]:
+            [`@apply ${prefix}focus relative block ${config.track.rounded}`]:
               {},
           },
+          //Switch:handle
           [`.${prefix}switch-ball-handle`]: {
-            [`@apply border-${config.handle.border} dark:border-${config.handle.borderDark} dark:bg-${config.handle.bgDark} absolute start-0.5 top-1/2 z-10 flex h-${config.handle.size} w-${config.handle.size} -translate-y-1/2 items-center justify-center rounded-${config.handle.rounded} border bg-${config.handle.bg} shadow transition focus:w-6`]:
+            [`@apply absolute start-0.5 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center ${config.handle.rounded} shadow focus:w-6`]:
+              {},
+            //Size
+            [`@apply h-${config.handle.size} w-${config.handle.size}`]: {},
+            //Background
+            [`@apply bg-${config.handle.background.light} dark:bg-${config.handle.background.dark}`]:
+              {},
+            //Border
+            [`@apply border-${config.handle.border.light} dark:border-${config.handle.border.dark}`]:
+              {},
+            //Transition
+            [`@apply transition-${config.track.transition.property} duration-${config.track.transition.duration}`]:
               {},
           },
+          //Switch:track
           [`.${prefix}switch-ball-track`]: {
-            [`@apply bg-${config.track.bg} dark:bg-${config.track.bgDark} block h-6 w-11 rounded-${config.track.rounded} shadow-inner transition-all duration-${config.track.duration}`]:
+            //Base
+            [`@apply block h-6 w-11 ${config.track.rounded}`]: {},
+            //Background
+            [`@apply bg-${config.track.background.light} dark:bg-${config.track.background.dark}`]:
+              {},
+            //Transition
+            [`@apply transition-${config.track.transition.property} duration-${config.track.transition.duration}`]:
               {},
           },
+          //Switch:icon
           [`.${prefix}switch-ball-icon`]: {
-            [`@apply pointer-events-none absolute start-2 top-1/2 z-10 h-${config.icon.size} w-${config.icon.size} translate-y-0 fill-current text-${config.icon.text} opacity-0 transition duration-${config.icon.duration}`]:
+            //Base
+            [`@apply pointer-events-none absolute start-2 top-1/2 z-10 translate-y-0 fill-current opacity-0`]:
+              {},
+            //Color
+            [`@apply text-${config.icon.color.light} dark:text-${config.icon.color.dark}`]:
+              {},
+            //Size
+            [`@apply h-${config.icon.size} w-${config.icon.size}`]: {},
+            //Transition
+            [`@apply transition-${config.track.transition.property} duration-${config.track.transition.duration}`]:
               {},
           },
+          //Label:single
           [`.${prefix}switch-ball-single-label`]: {
-            [`@apply text-${config.singleLabel.text} relative ms-3 cursor-pointer select-none font-${config.singleLabel.font} text-${config.singleLabel.textSize}`]:
+            //Base
+            [`@apply relative ms-3 cursor-pointer select-none`]: {},
+            //Font
+            [`@apply font-${config.label.single.font.family} text-${config.label.single.font.size}`]:
+              {},
+            //Color
+            [`@apply text-${config.label.single.font.color.light} dark:text-${config.label.single.font.color.dark}`]:
               {},
           },
+          //Label:dual
           [`.${prefix}switch-ball-dual-label`]: {
             [`@apply ms-3`]: {},
 
             [`.${prefix}switch-ball-label`]: {
-              [`@apply font-${config.dualLabel.label.font} text-${config.dualLabel.label.text} block text-${config.dualLabel.label.textSize} font-${config.dualLabel.label.fontWeight} dark:text-${config.dualLabel.label.textDark}`]:
+              //Base
+              [`@apply block`]: {},
+              //Font
+              [`@apply font-${config.label.dual.label.font.family} text-${config.label.dual.label.font.size}`]:
+                {},
+              //Color
+              [`@apply text-${config.label.dual.label.font.color.light} dark:text-${config.label.dual.label.font.color.dark}`]:
                 {},
             },
+            //Label:sublabel
             [`.${prefix}switch-ball-sublabel`]: {
-              [`@apply text-${config.dualLabel.sublabel.text} block font-${config.dualLabel.sublabel.font} text-${config.dualLabel.sublabel.textSize}`]:
+              //Base
+              [`@apply block`]: {},
+              //Font
+              [`@apply font-${config.label.dual.sublabel.font.family} text-${config.label.dual.sublabel.font.size}`]:
+                {},
+              //Color
+              [`@apply text-${config.label.dual.sublabel.font.color.light} dark:text-${config.label.dual.sublabel.font.color.dark}`]:
                 {},
             },
           },
+          //Switch:input
           [`.${prefix}switch-ball-input`]: {
             [`@apply absolute z-0 h-${config.input.size} w-${config.input.size} cursor-pointer opacity-0`]:
               {},
-
+            //Input:checked:handle
             [`&:checked ~ .${prefix}switch-ball-handle`]: {
               [`@apply -translate-y-1/2 translate-x-full rtl:-translate-x-full`]:
                 {},
             },
+            //Input:checked:icon
             [`&:checked ~ .${prefix}switch-ball-icon`]: {
               [`@apply -translate-y-1/2 opacity-100`]: {},
             },
           },
+          //color:primary
           [`&.${prefix}switch-ball-primary .${prefix}switch-ball-input:checked ~ .${prefix}switch-ball-track`]:
             {
-              [`@apply bg-${config.primary}`]: {},
+              [`@apply bg-${config.color.primary.light} dark:bg-${config.color.primary.dark}`]:
+                {},
             },
+          //color:info
           [`&.${prefix}switch-ball-info .${prefix}switch-ball-input:checked ~ .${prefix}switch-ball-track`]:
             {
-              [`@apply bg-${config.info}`]: {},
+              [`@apply bg-${config.color.info.light} dark:bg-${config.color.info.dark}`]:
+                {},
             },
+          //color:success
           [`&.${prefix}switch-ball-success .${prefix}switch-ball-input:checked ~ .${prefix}switch-ball-track`]:
             {
-              [`@apply bg-${config.success}`]: {},
+              [`@apply bg-${config.color.success.light} dark:bg-${config.color.success.dark}`]:
+                {},
             },
+          //color:warning
           [`&.${prefix}switch-ball-warning .${prefix}switch-ball-input:checked ~ .${prefix}switch-ball-track`]:
             {
-              [`@apply bg-${config.warning}`]: {},
+              [`@apply bg-${config.color.warning.light} dark:bg-${config.color.warning.dark}`]:
+                {},
             },
+          //color:danger
           [`&.${prefix}switch-ball-danger .${prefix}switch-ball-input:checked ~ .${prefix}switch-ball-track`]:
             {
-              [`@apply bg-${config.danger}`]: {},
+              [`@apply bg-${config.color.danger.light} dark:bg-${config.color.danger.dark}`]:
+                {},
             },
         },
       })
diff --git a/src/plugins/components/switch-ball/switch-ball.config.ts b/src/plugins/components/switch-ball/switch-ball.config.ts
index c61c61a..ecca5fa 100644
--- a/src/plugins/components/switch-ball/switch-ball.config.ts
+++ b/src/plugins/components/switch-ball/switch-ball.config.ts
@@ -1,52 +1,104 @@
 export const key = 'switchBall' as const
 
 export const defaulConfig = {
+  input: {
+    size: 'full',
+  },
   handle: {
-    border: 'muted-300',
-    borderDark: 'muted-600',
-    bg: 'white',
-    bgDark: 'muted-700',
     size: '5',
-    rounded: 'full',
+    rounded: 'rounded-full',
+    border: {
+      light: 'muted-300',
+      dark: 'muted-600',
+    },
+    background: {
+      light: 'white',
+      dark: 'muted-700',
+    },
+    transition: {
+      property: 'all',
+      duration: '300',
+    },
   },
   track: {
-    bg: 'muted-300',
-    bgDark: 'muted-600',
-    rounded: 'full',
-    duration: '300',
+    rounded: 'rounded-full',
+    background: {
+      light: 'muted-300',
+      dark: 'muted-600',
+    },
+    transition: {
+      property: 'all',
+      duration: '300',
+    },
   },
   icon: {
     size: '2.5',
-    text: 'white',
-    duration: '300',
-  },
-  singleLabel: {
-    text: 'muted-400',
-    font: 'sans',
-    textSize: 'sm',
+    color: {
+      light: 'white',
+      dark: 'white',
+    },
+    transition: {
+      property: 'all',
+      duration: '300',
+    },
   },
-  dualLabel: {
-    label: {
-      font: 'sans',
-      fontWeight: 'medium',
-      text: 'muted-800',
-      textDark: 'white',
-      textSize: 'sm',
-    },
-    sublabel: {
-      text: 'muted-400',
-      textSize: 'xs',
-      font: 'sans',
+  label: {
+    single: {
+      font: {
+        family: 'sans',
+        size: 'sm',
+        color: {
+          light: 'muted-400',
+          dark: 'muted-400',
+        },
+      },
+    },
+    dual: {
+      label: {
+        font: {
+          family: 'sans',
+          weight: 'medium',
+          size: 'sm',
+          color: {
+            light: 'muted-800',
+            dark: 'white',
+          },
+        },
+      },
+      sublabel: {
+        font: {
+          family: 'sans',
+          size: 'xs',
+          color: {
+            light: 'muted-400',
+            dark: 'muted-400',
+          },
+        },
+      },
     },
   },
-  input: {
-    size: 'full',
+  color: {
+    primary: {
+      light: 'primary-400',
+      dark: 'primary-400',
+    },
+    info: {
+      light: 'info-400',
+      dark: 'info-400',
+    },
+    success: {
+      light: 'success-400',
+      dark: 'success-400',
+    },
+    warning: {
+      light: 'warning-400',
+      dark: 'warning-400',
+    },
+    danger: {
+      light: 'danger-400',
+      dark: 'danger-400',
+    },
   },
-  primary: 'primary-400',
-  info: 'info-400',
-  success: 'success-400',
-  warning: 'warning-400',
-  danger: 'danger-400',
 }
 
 export type SwitchBallConfig = typeof defaulConfig