feat(TabSlider): config redesign and implementation

shuriken-ui · Dec 8, 2023 · 9ae744c · 9ae744c
1 parent 7c4f3cf
commit 9ae744c
Show file tree

Hide file tree

Showing 7 changed files with 133 additions and 73 deletions.
diff --git a/src/plugins/components/tab-slider/index.ts b/src/plugins/components/tab-slider/index.ts
@@ -15,88 +15,117 @@ export default plugin.withOptions(
       const config = theme(`shurikenUi.${key}`) satisfies TabSliderConfig
 
       addComponents({
+        //Wrapper
         [`.${prefix}tab-slider`]: {
           [`@apply relative`]: {},
-
+          //Tabs:inner
           [`.${prefix}tab-slider-inner`]: {
             [`@apply mb-6 flex`]: {},
           },
+          //Tabs:track
           [`.${prefix}tab-slider-track`]: {
-            [`@apply relative bg-${config.track.bg} dark:bg-${config.track.bgDark} relative flex w-${config.track.size} items-center font-${config.track.font}`]:
+            //Base
+            [`@apply relative relative flex w-${config.track.width} items-center font-${config.track.font.family}`]:
+              {},
+            //Background
+            [`@apply bg-${config.track.background.light} dark:bg-${config.track.background.dark}`]:
               {},
           },
+          //Tabs:item
           [`.${prefix}tab-slider-item`]: {
-            [`@apply relative z-20 flex h-full flex-1 items-center justify-center`]:
+            //Base
+            [`@apply relative z-20 h-full flex flex-1 items-center justify-center`]:
               {},
-            [`@apply text-${config.item.fontSize} font-${config.item.fontFamily}`]:
+            //Font
+            [`@apply text-${config.item.font.size} font-${config.item.font.family}`]:
               {},
-
+            //Item:inactive
             [`&:not(.${prefix}active)`]: {
-              [`@apply text-${config.item.notActiveText}`]: {},
+              [`@apply text-${config.item.font.color.inactive.light} dark:text-${config.item.font.color.inactive.dark}`]:
+                {},
             },
+            //Item:active
             [`&.${prefix}active`]: {
-              [`@apply text-${config.item.activeText}`]: {},
+              [`@apply text-${config.item.font.color.active.light} dark:text-${config.item.font.color.active.dark}`]:
+                {},
             },
           },
+          //Tabs:naver
           [`.${prefix}tab-slider-naver`]: {
-            [`@apply bg-${config.naver.bg} absolute start-0 top-0 z-10 h-full transition-all duration-${config.naver.duration}`]:
+            //Base
+            [`@apply absolute start-0 top-0 z-10 h-full`]: {},
+            //Background
+            [`@apply bg-${config.naver.background.light} dark:bg-${config.naver.background.dark}`]:
+              {},
+            //Transition
+            [`@apply transition-${config.naver.transition.property} duration-${config.naver.transition.duration}`]:
               {},
           },
+          //Tabs:content
           [`.${prefix}tab-content`]: {
             [`@apply relative block`]: {},
           },
+          //Align:center
           [`&.${prefix}tabs-centered`]: {
             [`.${prefix}tab-slider-inner`]: {
               [`@apply justify-center`]: {},
             },
           },
+          //Align:end
           [`&.${prefix}tabs-end`]: {
             [`.${prefix}tab-slider-inner`]: {
               [`@apply justify-end`]: {},
             },
           },
+          //Rounded:sm
           [`&.${prefix}tabs-rounded`]: {
             [`.${prefix}tab-slider-track, .${prefix}tab-slider-naver`]: {
-              [`@apply rounded-${config.rounded.default}`]: {},
+              [`@apply ${config.rounded.sm}`]: {},
             },
           },
+          //Rounded:md
           [`&.${prefix}tabs-smooth`]: {
             [`.${prefix}tab-slider-track, .${prefix}tab-slider-naver`]: {
-              [`@apply rounded-${config.rounded.smooth}`]: {},
+              [`@apply ${config.rounded.md}`]: {},
             },
           },
+          //Rounded:lg
           [`&.${prefix}tabs-curved`]: {
             [`.${prefix}tab-slider-track, .${prefix}tab-slider-naver`]: {
-              [`@apply rounded-${config.rounded.curved}`]: {},
+              [`@apply ${config.rounded.lg}`]: {},
             },
           },
+          //Rounded:full
           [`&.${prefix}tabs-full`]: {
             [`.${prefix}tab-slider-track, .${prefix}tab-slider-naver`]: {
-              [`@apply rounded-${config.rounded.full}`]: {},
+              [`@apply ${config.rounded.full}`]: {},
             },
           },
+          //Size:sm
           [`&.${prefix}tabs-sm`]: {
             [`&.${prefix}tabs-two-slots .${prefix}tab-slider-track`]: {
-              [`@apply max-w-${config.tabsSM.twoSlotsW}`]: {},
+              [`@apply max-w-${config.size.sm.slots.two}`]: {},
             },
             [`&.${prefix}tabs-three-slots .${prefix}tab-slider-track`]: {
-              [`@apply max-w-${config.tabsSM.threeSlotsW}`]: {},
+              [`@apply max-w-${config.size.sm.slots.three}`]: {},
             },
             [`.${prefix}tab-slider-track`]: {
-              [`@apply h-${config.tabsSM.track}`]: {},
+              [`@apply h-${config.size.sm.track.size}`]: {},
             },
           },
+          //Size:md
           [`&.${prefix}tabs-md`]: {
             [`&.${prefix}tabs-two-slots .${prefix}tab-slider-track`]: {
-              [`@apply max-w-${config.tabsMD.twoSlotsW}`]: {},
+              [`@apply max-w-${config.size.md.slots.two}`]: {},
             },
             [`&.${prefix}tabs-three-slots .${prefix}tab-slider-track`]: {
-              [`@apply max-w-${config.tabsMD.threeSlotsW}`]: {},
+              [`@apply max-w-${config.size.md.slots.three}`]: {},
             },
             [`.${prefix}tab-slider-track`]: {
-              [`@apply h-${config.tabsMD.track}`]: {},
+              [`@apply h-${config.size.md.track.size}`]: {},
             },
           },
+          //Slots:two
           [`&.${prefix}tabs-two-slots`]: {
             [`.${prefix}tab-slider-naver, .${prefix}tab-slider-item`]: {
               [`@apply w-1/2`]: {},
@@ -110,6 +139,7 @@ export default plugin.withOptions(
                 [`@apply ms-[50%]`]: {},
               },
           },
+          //Slots:three
           [`&.${prefix}tabs-three-slots`]: {
             [`.${prefix}tab-slider-naver, .${prefix}tab-slider-item`]: {
               [`@apply w-1/3`]: {},

diff --git a/src/plugins/components/tab-slider/tab-slider.component.ts b/src/plugins/components/tab-slider/tab-slider.component.ts
@@ -10,7 +10,7 @@ import * as variants from './tab-slider.variants'
 export const TabSlider = ({
   tabs,
   justify = 'start',
-  shape = 'smooth',
+  rounded = 'md',
   size = 'md',
   classes,
   children,
@@ -24,7 +24,7 @@ export const TabSlider = ({
       class=${[
         'nui-tab-slider',
         justify && variants.justify[justify],
-        shape && variants.shape[shape],
+        rounded && variants.rounded[rounded],
         size && variants.size[size],
         classes?.wrapper,
         tabsLength() === 2 ? 'nui-tabs-two-slots' : 'nui-tabs-three-slots',

diff --git a/src/plugins/components/tab-slider/tab-slider.config.ts b/src/plugins/components/tab-slider/tab-slider.config.ts
@@ -1,37 +1,67 @@
 export const key = 'tabSlider' as const
 
 export const defaultConfig = {
+  rounded: {
+    sm: 'rounded-md',
+    md: 'rounded-lg',
+    lg: 'rounded-xl',
+    full: 'rounded-full',
+  },
   track: {
-    bg: 'muted-100',
-    bgDark: 'muted-700',
-    size: 'full',
-    font: 'sans',
+    width: 'full',
+    font: {
+      family: 'sans',
+    },
+    background: {
+      light: 'muted-100',
+      dark: 'muted-700',
+    },
   },
   item: {
-    notActiveText: 'muted-400',
-    activeText: 'white',
-    fontSize: 'sm',
-    fontFamily: 'sans',
+    font: {
+      family: 'sans',
+      size: 'sm',
+      color: {
+        active: {
+          light: 'white',
+          dark: 'white',
+        },
+        inactive: {
+          light: 'muted-400',
+          dark: 'muted-400',
+        },
+      },
+    },
   },
   naver: {
-    bg: 'primary-500',
-    duration: '300',
-  },
-  rounded: {
-    default: 'md',
-    smooth: 'lg',
-    curved: 'xl',
-    full: 'full',
-  },
-  tabsSM: {
-    twoSlotsW: '[140px]',
-    threeSlotsW: '[210px]',
-    track: '8',
+    background: {
+      light: 'primary-500',
+      dark: 'primary-500',
+    },
+    transition: {
+      property: 'all',
+      duration: '300',
+    },
   },
-  tabsMD: {
-    twoSlotsW: '[250px]',
-    threeSlotsW: '[320px]',
-    track: '10',
+  size: {
+    sm: {
+      slots: {
+        two: '[140px]',
+        three: '[210px]',
+      },
+      track: {
+        size: '8',
+      },
+    },
+    md: {
+      slots: {
+        two: '[250px]',
+        three: '[320px]',
+      },
+      track: {
+        size: '10',
+      },
+    },
   },
 }
 

diff --git a/src/plugins/components/tab-slider/tab-slider.doc.mdx b/src/plugins/components/tab-slider/tab-slider.doc.mdx
@@ -18,7 +18,7 @@ Tab sliders allow you to seaparate your content in different togglable areas.
 
 <br />
 
-### Shape: straight
+### Rounded: none
 
 Tab sliders can have different shapes. Below is an example of the straight shape.
 
@@ -28,7 +28,7 @@ Tab sliders can have different shapes. Below is an example of the straight shape
 
 <br />
 
-### Shape: rounded
+### Rounded: sm
 
 Tab sliders can have different shapes. Below is an example of the rounded shape.
 
@@ -38,7 +38,7 @@ Tab sliders can have different shapes. Below is an example of the rounded shape.
 
 <br />
 
-### Shape: smooth
+### Rounded: md
 
 Tab sliders can have different shapes. Below is an example of the smooth shape.
 
@@ -48,7 +48,7 @@ Tab sliders can have different shapes. Below is an example of the smooth shape.
 
 <br />
 
-### Shape: curved
+### Rounded: lg
 
 Tab sliders can have different shapes. Below is an example of the curved shape.
 
@@ -58,7 +58,7 @@ Tab sliders can have different shapes. Below is an example of the curved shape.
 
 <br />
 
-### Shape: full
+### Rounded: full
 
 Tab sliders can have different shapes. Below is an example of the full shape.
 

diff --git a/src/plugins/components/tab-slider/tab-slider.stories.ts b/src/plugins/components/tab-slider/tab-slider.stories.ts
@@ -10,10 +10,10 @@ const meta = {
   // tags: ['autodocs'],
   render: (args) => TabSlider(args),
   argTypes: {
-    shape: {
+    rounded: {
       control: { type: 'select' },
-      options: ['straight', 'rounded', 'smooth', 'curved', 'full'],
-      defaultValue: 'smooth',
+      options: ['none', 'sm', 'md', 'lg', 'full'],
+      defaultValue: 'md',
     },
     size: {
       control: { type: 'select' },
@@ -63,12 +63,12 @@ export const Main: Story = {
 }
 // #endregion
 
-// #region Shapes
+// #region Rounded
 export const ShapeStraight: Story = {
-  name: 'Shape: straight',
+  name: 'Rounded: none',
   args: {
     tabs: data,
-    shape: 'straight',
+    rounded: 'none',
     children: html`
       <div>
         <p class="font-sans text-muted-500 dark:text-muted-400">
@@ -83,10 +83,10 @@ export const ShapeStraight: Story = {
 }
 
 export const ShapeRounded: Story = {
-  name: 'Shape: rounded',
+  name: 'Rounded: sm',
   args: {
     tabs: data,
-    shape: 'rounded',
+    rounded: 'sm',
     children: html`
       <div>
         <p class="font-sans text-muted-500 dark:text-muted-400">
@@ -101,10 +101,10 @@ export const ShapeRounded: Story = {
 }
 
 export const ShapeSmooth: Story = {
-  name: 'Shape: smooth',
+  name: 'Rounded: md',
   args: {
     tabs: data,
-    shape: 'smooth',
+    rounded: 'md',
     children: html`
       <div>
         <p class="font-sans text-muted-500 dark:text-muted-400">
@@ -119,10 +119,10 @@ export const ShapeSmooth: Story = {
 }
 
 export const ShapeCurved: Story = {
-  name: 'Shape: curved',
+  name: 'Rounded: lg',
   args: {
     tabs: data,
-    shape: 'curved',
+    rounded: 'lg',
     children: html`
       <div>
         <p class="font-sans text-muted-500 dark:text-muted-400">
@@ -137,10 +137,10 @@ export const ShapeCurved: Story = {
 }
 
 export const ShapeFull: Story = {
-  name: 'Shape: full',
+  name: 'Rounded: full',
   args: {
     tabs: data,
-    shape: 'full',
+    rounded: 'full',
     children: html`
       <div>
         <p class="font-sans text-muted-500 dark:text-muted-400">
@@ -238,7 +238,7 @@ export const SlotDual: Story = {
   args: {
     tabs: data,
     justify: 'start',
-    shape: 'full',
+    rounded: 'full',
     children: html`
       <div>
         <p class="font-sans text-muted-500 dark:text-muted-400">
@@ -257,7 +257,7 @@ export const SlotTriple: Story = {
   args: {
     tabs: dataThree,
     justify: 'start',
-    shape: 'full',
+    rounded: 'full',
     children: html`
       <div>
         <p class="font-sans text-muted-500 dark:text-muted-400">