feat(Progress): config redesign and implementation

shuriken-ui · Dec 8, 2023 · 371794a · 371794a
1 parent 7442c08
commit 371794a
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 67 deletions.
diff --git a/src/plugins/components/progress/index.ts b/src/plugins/components/progress/index.ts
@@ -16,73 +16,81 @@ export default plugin.withOptions(
 
       addComponents({
         [`.${prefix}progress`]: {
-          [`@apply relative w-${config.size} overflow-hidden`]: {},
-
+          [`@apply relative w-${config.width} overflow-hidden`]: {},
+          //Bar
           [`.${prefix}progress-bar`]: {
-            [`@apply absolute start-0 top-0 h-full transition-all duration-${config.bar.duration}`]:
+            [`@apply absolute start-0 top-0 h-full transition-${config.bar.transition.property} duration-${config.bar.transition.duration}`]:
               {},
           },
+          //Color
           [`&.${prefix}progress-default`]: {
-            [`@apply bg-${config.default.bg} dark:bg-${config.default.bgDark}`]:
+            [`@apply bg-${config.color.default.background.light} dark:bg-${config.color.default.background.dark}`]:
               {},
           },
           [`&.${prefix}progress-contrast`]: {
-            [`@apply bg-${config.defaultContrast.bg} dark:bg-${config.defaultContrast.bgDark}`]:
+            [`@apply bg-${config.color.defaultContrast.background.light} dark:bg-${config.color.defaultContrast.background.dark}`]:
               {},
           },
+          //Size
           [`&.${prefix}progress-xs`]: {
-            [`@apply h-${config.progressXS}`]: {},
+            [`@apply h-${config.size.xs}`]: {},
           },
           [`&.${prefix}progress-sm`]: {
-            [`@apply h-${config.progressSM}`]: {},
+            [`@apply h-${config.size.sm}`]: {},
           },
           [`&.${prefix}progress-md`]: {
-            [`@apply h-${config.progressMD}`]: {},
+            [`@apply h-${config.size.md}`]: {},
           },
           [`&.${prefix}progress-lg`]: {
-            [`@apply h-${config.progressLG}`]: {},
+            [`@apply h-${config.size.lg}`]: {},
           },
           [`&.${prefix}progress-xl`]: {
-            [`@apply h-${config.progressXL}`]: {},
+            [`@apply h-${config.size.xl}`]: {},
           },
+          //Rounded
           [`&.${prefix}progress-rounded, &.${prefix}progress-rounded .${prefix}progress-bar`]:
             {
-              [`@apply rounded`]: {},
+              [`@apply ${config.rounded.sm}`]: {},
+            },
+          [`&.${prefix}progress-smooth, &.${prefix}progress-smooth .${prefix}progress-bar`]:
+            {
+              [`@apply ${config.rounded.md}`]: {},
             },
           [`&.${prefix}progress-curved, &.${prefix}progress-curved .${prefix}progress-bar`]:
             {
-              [`@apply rounded-${config.rounded.curved}`]: {},
+              [`@apply ${config.rounded.lg}`]: {},
             },
           [`&.${prefix}progress-full, &.${prefix}progress-full .${prefix}progress-bar`]:
             {
-              [`@apply rounded-${config.rounded.full}`]: {},
+              [`@apply ${config.rounded.full}`]: {},
             },
           [`&.${prefix}progress-indeterminate .${prefix}progress-bar`]: {
             [`@apply w-full`]: {},
           },
+          //Bar color
           [`&.${prefix}progress-primary`]: {
             [`.${prefix}progress-bar`]: {
-              [`@apply bg-${config.primary}`]: {},
+              [`@apply bg-${config.bar.color.primary}`]: {},
             },
           },
           [`&.${prefix}progress-info`]: {
             [`.${prefix}progress-bar`]: {
-              [`@apply bg-${config.info}`]: {},
+              [`@apply bg-${config.bar.color.info}`]: {},
             },
           },
           [`&.${prefix}progress-success`]: {
             [`.${prefix}progress-bar`]: {
-              [`@apply bg-${config.success}`]: {},
+              [`@apply bg-${config.bar.color.success}`]: {},
             },
           },
           [`&.${prefix}progress-warning`]: {
             [`.${prefix}progress-bar`]: {
-              [`@apply bg-${config.warning}`]: {},
+              [`@apply bg-${config.bar.color.warning}`]: {},
             },
           },
           [`&.${prefix}progress-danger`]: {
             [`.${prefix}progress-bar`]: {
-              [`@apply bg-${config.danger}`]: {},
+              [`@apply bg-${config.bar.color.danger}`]: {},
             },
           },
         },

diff --git a/src/plugins/components/progress/progress.component.ts b/src/plugins/components/progress/progress.component.ts
@@ -10,7 +10,7 @@ import * as variants from './progress.variants'
 export const Progress = ({
   color = 'primary',
   contrast = 'default',
-  shape = 'full',
+  rounded = 'full',
   size = 'md',
   value,
   classes,
@@ -27,7 +27,7 @@ export const Progress = ({
         color && variants.color[color],
         contrast && variants.contrast[contrast],
         size && variants.size[size],
-        shape && variants.shape[shape],
+        rounded && variants.rounded[rounded],
         classes?.wrapper,
       ]
         .filter(Boolean)

diff --git a/src/plugins/components/progress/progress.config.ts b/src/plugins/components/progress/progress.config.ts
@@ -1,32 +1,47 @@
 export const key = 'progress' as const
 
 export const defaultConfig = {
-  size: 'full',
-  bar: {
-    duration: '300',
+  width: 'full',
+  rounded: {
+    sm: 'rounded',
+    md: 'rounded-md',
+    lg: 'rounded-lg',
+    full: 'rounded-full',
   },
-  default: {
-    bg: 'muted-200',
-    bgDark: 'muted-700',
+  bar: {
+    color: {
+      primary: 'primary-500',
+      info: 'info-500',
+      success: 'success-500',
+      warning: 'warning-500',
+      danger: 'danger-500',
+    },
+    transition: {
+      property: 'all',
+      duration: '300',
+    },
   },
-  defaultContrast: {
-    bg: 'muted-200',
-    bgDark: 'muted-900',
+  color: {
+    default: {
+      background: {
+        light: 'muted-200',
+        dark: 'muted-700',
+      },
+    },
+    defaultContrast: {
+      background: {
+        light: 'muted-200',
+        dark: 'muted-900',
+      },
+    },
   },
-  progressXS: '1',
-  progressSM: '2',
-  progressMD: '3',
-  progressLG: '3',
-  progressXL: '5',
-  rounded: {
-    curved: 'lg',
-    full: 'full',
+  size: {
+    xs: '1',
+    sm: '2',
+    md: '3',
+    lg: '3',
+    xl: '5',
   },
-  primary: 'primary-500',
-  info: 'info-500',
-  success: 'success-500',
-  warning: 'warning-500',
-  danger: 'danger-500',
 }
 
 export type ProgressConfig = typeof defaultConfig

diff --git a/src/plugins/components/progress/progress.stories.ts b/src/plugins/components/progress/progress.stories.ts
@@ -20,10 +20,10 @@ const meta = {
       options: ['default', 'contrast'],
       defaultValue: 'default',
     },
-    shape: {
+    rounded: {
       control: { type: 'select' },
-      options: ['straight', 'rounded', 'curved', 'full'],
-      defaultValue: 'straight',
+      options: ['none', 'sm', 'md', 'lg', 'full'],
+      defaultValue: 'none',
     },
     value: {
       control: { type: 'number' },
@@ -44,7 +44,7 @@ export const Solid: Story = {
     // set default values used for UI preview
     color: 'primary',
     size: 'sm',
-    shape: 'full',
+    rounded: 'full',
     value: 72,
     style: 'max-width: 320px;',
   },
@@ -57,7 +57,7 @@ export const SizeXs: Story = {
   args: {
     color: 'primary',
     size: 'xs',
-    shape: 'full',
+    rounded: 'full',
     value: 72,
     style: 'max-width: 320px; min-width: 320px;',
   },
@@ -68,7 +68,7 @@ export const SizeSm: Story = {
   args: {
     color: 'primary',
     size: 'sm',
-    shape: 'full',
+    rounded: 'full',
     value: 72,
     style: 'max-width: 320px; min-width: 320px;',
   },
@@ -79,7 +79,7 @@ export const SizeMd: Story = {
   args: {
     color: 'primary',
     size: 'md',
-    shape: 'full',
+    rounded: 'full',
     value: 72,
     style: 'max-width: 320px; min-width: 320px;',
   },
@@ -90,7 +90,7 @@ export const SizeLg: Story = {
   args: {
     color: 'primary',
     size: 'lg',
-    shape: 'full',
+    rounded: 'full',
     value: 72,
     style: 'max-width: 320px; min-width: 320px;',
   },
@@ -101,7 +101,7 @@ export const SizeXl: Story = {
   args: {
     color: 'primary',
     size: 'xl',
-    shape: 'full',
+    rounded: 'full',
     value: 72,
     style: 'max-width: 320px; min-width: 320px;',
   },
@@ -114,7 +114,7 @@ export const ColorPrimary: Story = {
   args: {
     color: 'primary',
     size: 'sm',
-    shape: 'full',
+    rounded: 'full',
     value: 72,
     style: 'max-width: 320px; min-width: 320px;',
   },
@@ -125,7 +125,7 @@ export const ColorInfo: Story = {
   args: {
     color: 'info',
     size: 'sm',
-    shape: 'full',
+    rounded: 'full',
     value: 72,
     style: 'max-width: 320px; min-width: 320px;',
   },
@@ -136,7 +136,7 @@ export const ColorSuccess: Story = {
   args: {
     color: 'success',
     size: 'sm',
-    shape: 'full',
+    rounded: 'full',
     value: 72,
     style: 'max-width: 320px; min-width: 320px;',
   },
@@ -147,7 +147,7 @@ export const ColorWarning: Story = {
   args: {
     color: 'warning',
     size: 'sm',
-    shape: 'full',
+    rounded: 'full',
     value: 72,
     style: 'max-width: 320px; min-width: 320px;',
   },
@@ -158,7 +158,7 @@ export const ColorDanger: Story = {
   args: {
     color: 'danger',
     size: 'sm',
-    shape: 'full',
+    rounded: 'full',
     value: 72,
     style: 'max-width: 320px; min-width: 320px;',
   },
@@ -171,7 +171,7 @@ export const IndeterminatePrimary: Story = {
   args: {
     color: 'primary',
     size: 'sm',
-    shape: 'full',
+    rounded: 'full',
     style: 'max-width: 320px; min-width: 320px;',
   },
 }
@@ -181,7 +181,7 @@ export const IndeterminateInfo: Story = {
   args: {
     color: 'info',
     size: 'sm',
-    shape: 'full',
+    rounded: 'full',
     style: 'max-width: 320px; min-width: 320px;',
   },
 }
@@ -191,7 +191,7 @@ export const IndeterminateSuccess: Story = {
   args: {
     color: 'success',
     size: 'sm',
-    shape: 'full',
+    rounded: 'full',
     style: 'max-width: 320px; min-width: 320px;',
   },
 }
@@ -201,7 +201,7 @@ export const IndeterminateWarning: Story = {
   args: {
     color: 'warning',
     size: 'sm',
-    shape: 'full',
+    rounded: 'full',
     style: 'max-width: 320px; min-width: 320px;',
   },
 }
@@ -211,7 +211,7 @@ export const IndeterminateDanger: Story = {
   args: {
     color: 'danger',
     size: 'sm',
-    shape: 'full',
+    rounded: 'full',
     style: 'max-width: 320px; min-width: 320px;',
   },
 }

diff --git a/src/plugins/components/progress/progress.types.ts b/src/plugins/components/progress/progress.types.ts
@@ -3,7 +3,7 @@ import type { PropertyVariant } from '~/types/utils'
 export interface ProgressProps extends Record<string, unknown> {
   color?: 'primary' | 'info' | 'success' | 'warning' | 'danger'
   contrast?: 'default' | 'contrast'
-  shape?: 'straight' | 'rounded' | 'curved' | 'full'
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
   value?: number
   max?: number

diff --git a/src/plugins/components/progress/progress.variants.ts b/src/plugins/components/progress/progress.variants.ts
@@ -13,12 +13,13 @@ export const contrast = {
   contrast: 'nui-progress-contrast',
 } as const satisfies ProgressVariant<'contrast'>
 
-export const shape = {
-  straight: '',
-  rounded: 'nui-progress-rounded',
-  curved: 'nui-progress-curved',
+export const rounded = {
+  none: '',
+  sm: 'nui-progress-rounded',
+  md: 'nui-progress-smooth',
+  lg: 'nui-progress-curved',
   full: 'nui-progress-full',
-} as const satisfies ProgressVariant<'shape'>
+} as const satisfies ProgressVariant<'rounded'>
 
 export const size = {
   xs: 'nui-progress-xs',