feat(MessageText): config redesign and implementation

shuriken-ui · Dec 8, 2023 · 80896dc · 80896dc
1 parent 2fefcea
commit 80896dc
Show file tree

Hide file tree

Showing 7 changed files with 193 additions and 117 deletions.
diff --git a/src/plugins/components/message-text/index.ts b/src/plugins/components/message-text/index.ts
@@ -19,87 +19,117 @@ export default plugin.withOptions(
       const config = theme(`shurikenUi.${key}`) satisfies MessageTextConfig
 
       addComponents({
+        //Wrapper
         [`.${prefix}message-text`]: {
-          [`@apply relative p-${config.space}`]: {},
-
+          [`@apply relative p-${config.padding}`]: {},
+          //Message:header
           [`.${prefix}message-head`]: {
-            [`@apply flex items-center gap-${config.head.space} mb-2`]: {},
+            [`@apply flex items-center gap-${config.header.gap} mb-2`]: {},
           },
+          //Message:dot
           [`.${prefix}message-dot`]: {
-            [`@apply inline-block h-${config.dot.size} w-${config.dot.size} rounded-${config.dot.rounded} bg-${config.dot.bg} dark:bg-${config.dot.bgDark}`]:
+            //Base
+            [`@apply inline-block h-${config.dot.size} w-${config.dot.size} rounded-${config.dot.rounded}`]:
+              {},
+            //Background
+            [`@apply bg-${config.dot.background.light} dark:bg-${config.dot.background.dark}`]:
               {},
           },
+          //Message:close
           [`.${prefix}message-close`]: {
             [`@apply absolute top-${config.close.position} end-${config.close.position}`]:
               {},
           },
-          [`&.${prefix}message-white`]: {
-            [`@apply bg-${config.white.bg} dark:bg-${config.white.bgDark}`]: {},
-          },
-          [`&.${prefix}message-white-contrast`]: {
-            [`@apply bg-${config.whiteContrast.bg} dark:bg-${config.whiteContrast.bgDark}`]:
-              {},
-          },
+          //Rounded:sm
           [`&.${prefix}message-rounded`]: {
-            [`@apply rounded-${config.rounded.default}`]: {},
+            [`@apply ${config.rounded.default}`]: {},
           },
+          //Rounded:md
           [`&.${prefix}message-smooth`]: {
-            [`@apply rounded-${config.rounded.smooth}`]: {},
+            [`@apply ${config.rounded.smooth}`]: {},
           },
+          //Rounded:lg
           [`&.${prefix}message-curved`]: {
-            [`@apply rounded-${config.rounded.curved}`]: {},
+            [`@apply ${config.rounded.curved}`]: {},
           },
+          //Color:white
+          [`&.${prefix}message-white`]: {
+            [`@apply bg-${config.color.white.background.light} dark:bg-${config.color.white.background.dark}`]:
+              {},
+          },
+          //Color:whiteContrast
+          [`&.${prefix}message-white-contrast`]: {
+            [`@apply bg-${config.color.whiteContrast.background.light} dark:bg-${config.color.whiteContrast.background.dark}`]:
+              {},
+          },
+          //Color:default
           [`&.${prefix}message-default`]: {
-            [`@apply border border-${config.default.border} dark:border-${config.default.borderDark}`]:
+            [`@apply border border-${config.color.default.border.light} dark:border-${config.color.default.border.dark}`]:
               {},
-
+            //Message:dot
             [`.${prefix}message-dot`]: {
-              [`@apply bg-${config.default.dot.bg} dark:bg-${config.default.dot.bgDark}`]:
+              [`@apply bg-${config.color.default.dot.background.light} dark:bg-${config.color.default.dot.background.dark}`]:
                 {},
             },
           },
+          //Color:contrast
           [`&.${prefix}message-contrast`]: {
-            [`@apply border border-${config.contrast.border} dark:border-${config.contrast.borderDark}`]:
+            [`@apply border border-${config.color.contrast.border.light} dark:border-${config.color.contrast.border.dark}`]:
               {},
-
+            //Message:dot
             [`.${prefix}message-dot`]: {
-              [`@apply bg-${config.contrast.dot.bg} dark:bg-${config.contrast.dot.bgDark}`]:
+              [`@apply bg-${config.color.contrast.dot.background.light} dark:bg-${config.color.contrast.dot.background.dark}`]:
                 {},
             },
           },
+          //Color:primary
           [`&.${prefix}message-primary`]: {
-            [`@apply border border-${config.primary.border}`]: {},
-
+            [`@apply border border-${config.color.primary.border.light} dark:border-${config.color.primary.border.dark}`]:
+              {},
+            //Message:dot
             [`.${prefix}message-dot`]: {
-              [`@apply bg-${config.primary.dot.bg}`]: {},
+              [`@apply bg-${config.color.primary.dot.background.light} dark:bg-${config.color.primary.dot.background.dark}`]:
+                {},
             },
           },
+          //Color:info
           [`&.${prefix}message-info`]: {
-            [`@apply border border-${config.info.border}`]: {},
-
+            [`@apply border border-${config.color.info.border.light} dark:border-${config.color.info.border.dark}`]:
+              {},
+            //Message:dot
             [`.${prefix}message-dot`]: {
-              [`@apply bg-${config.info.dot.bg}`]: {},
+              [`@apply bg-${config.color.info.dot.background.light} dark:bg-${config.color.info.dot.background.dark}`]:
+                {},
             },
           },
+          //Color:success
           [`&.${prefix}message-success`]: {
-            [`@apply border border-${config.success.border}`]: {},
-
+            [`@apply border border-${config.color.success.border.light} dark:border-${config.color.success.border.dark}`]:
+              {},
+            //Message:dot
             [`.${prefix}message-dot`]: {
-              [`@apply bg-${config.success.dot.bg}`]: {},
+              [`@apply bg-${config.color.success.dot.background.light} dark:bg-${config.color.success.dot.background.dark}`]:
+                {},
             },
           },
+          //Color:warning
           [`&.${prefix}message-warning`]: {
-            [`@apply border border-${config.warning.border}`]: {},
-
+            [`@apply border border-${config.color.warning.border.light} dark:border-${config.color.warning.border.dark}`]:
+              {},
+            //Message:dot
             [`.${prefix}message-dot`]: {
-              [`@apply bg-${config.warning.dot.bg}`]: {},
+              [`@apply bg-${config.color.warning.dot.background.light} dark:bg-${config.color.warning.dot.background.dark}`]:
+                {},
             },
           },
+          //Color:danger
           [`&.${prefix}message-danger`]: {
-            [`@apply border border-${config.danger.border}`]: {},
-
+            [`@apply border border-${config.color.danger.border.light} dark:border-${config.color.danger.border.dark}`]:
+              {},
+            //Message:dot
             [`.${prefix}message-dot`]: {
-              [`@apply bg-${config.danger.dot.bg}`]: {},
+              [`@apply bg-${config.color.danger.dot.background.light} dark:bg-${config.color.danger.dot.background.dark}`]:
+                {},
             },
           },
         },

diff --git a/src/plugins/components/message-text/message-text.component.ts b/src/plugins/components/message-text/message-text.component.ts
@@ -15,7 +15,7 @@ export const MessageText = ({
   text,
   contrast = 'white',
   color = 'default',
-  shape = 'rounded',
+  rounded = 'sm',
   classes,
   ...attrs
 }: MessageTextAttrs) => {
@@ -25,7 +25,7 @@ export const MessageText = ({
         'nui-message-text',
         color && variants.color[color],
         contrast && variants.contrast[contrast],
-        shape && variants.shape[shape],
+        rounded && variants.rounded[rounded],
         classes?.wrapper,
       ]
         .filter(Boolean)
@@ -53,7 +53,7 @@ export const MessageText = ({
         children: text,
       })}
       ${ButtonClose({
-        shape: 'full',
+        rounded: 'full',
         color: 'default',
         classes: {
           wrapper: 'nui-message-close',

diff --git a/src/plugins/components/message-text/message-text.config.ts b/src/plugins/components/message-text/message-text.config.ts
@@ -1,77 +1,123 @@
 export const key = 'messageText' as const
 
 export const defaultConfig = {
-  space: '6',
-  head: {
-    space: '2',
+  padding: '6',
+  rounded: {
+    default: 'rounded-md',
+    smooth: 'rounded-lg',
+    curved: 'rounded-xl',
+  },
+  header: {
+    gap: '2',
   },
   dot: {
     size: '3',
     rounded: 'full',
-    bg: 'muted-200',
-    bgDark: 'muted-700',
+    background: {
+      light: 'muted-200',
+      dark: 'muted-700',
+    },
   },
   close: {
     position: '2',
   },
-  white: {
-    bg: 'white',
-    bgDark: 'muted-800',
-  },
-  whiteContrast: {
-    bg: 'white',
-    bgDark: 'muted-950',
-  },
-  default: {
-    border: 'muted-300',
-    borderDark: 'muted-700',
-    dot: {
-      bg: 'muted-200',
-      bgDark: 'muted-700',
+  color: {
+    default: {
+      border: {
+        light: 'muted-300',
+        dark: 'muted-700',
+      },
+      dot: {
+        background: {
+          light: 'muted-200',
+          dark: 'muted-700',
+        },
+      },
     },
-  },
-  contrast: {
-    border: 'muted-300',
-    borderDark: 'muted-800',
-    dot: {
-      bg: 'muted-200',
-      bgDark: 'muted-800',
+    white: {
+      background: {
+        light: 'white',
+        dark: 'muted-800',
+      },
     },
-  },
-  primary: {
-    border: 'primary-500',
-    dot: {
-      bg: 'primary-500',
+    whiteContrast: {
+      background: {
+        light: 'white',
+        dark: 'muted-950',
+      },
     },
-  },
-  info: {
-    border: 'info-500',
-    dot: {
-      bg: 'info-500',
+    contrast: {
+      border: {
+        light: 'muted-300',
+        dark: 'muted-800',
+      },
+      dot: {
+        background: {
+          light: 'muted-200',
+          dark: 'muted-800',
+        },
+      },
     },
-  },
-  success: {
-    border: 'success-500',
-    dot: {
-      bg: 'success-500',
+    primary: {
+      border: {
+        light: 'primary-500',
+        dark: 'primary-500',
+      },
+      dot: {
+        background: {
+          light: 'primary-500',
+          dark: 'primary-500',
+        },
+      },
     },
-  },
-  warning: {
-    border: 'warning-500',
-    dot: {
-      bg: 'warning-500',
+    info: {
+      border: {
+        light: 'info-500',
+        dark: 'info-500',
+      },
+      dot: {
+        background: {
+          light: 'info-500',
+          dark: 'info-500',
+        },
+      },
     },
-  },
-  danger: {
-    border: 'danger-500',
-    dot: {
-      bg: 'danger-500',
+    success: {
+      border: {
+        light: 'success-500',
+        dark: 'success-500',
+      },
+      dot: {
+        background: {
+          light: 'success-500',
+          dark: 'success-500',
+        },
+      },
+    },
+    warning: {
+      border: {
+        light: 'warning-500',
+        dark: 'warning-500',
+      },
+      dot: {
+        background: {
+          light: 'warning-500',
+          dark: 'warning-500',
+        },
+      },
+    },
+    danger: {
+      border: {
+        light: 'danger-500',
+        dark: 'danger-500',
+      },
+      dot: {
+        background: {
+          light: 'danger-500',
+          dark: 'danger-500',
+        },
+      },
     },
-  },
-  rounded: {
-    default: 'md',
-    smooth: 'lg',
-    curved: 'xl',
   },
 }
 

diff --git a/src/plugins/components/message-text/message-text.doc.mdx b/src/plugins/components/message-text/message-text.doc.mdx
@@ -18,7 +18,7 @@ Text messages allow you to display important information users should see.
 
 <br />
 
-### Shape: straight
+### Rounded: none
 
 Messages can have different shapes. The following example shows the straight shape.
 
@@ -28,7 +28,7 @@ Messages can have different shapes. The following example shows the straight sha
 
 <br />
 
-### Shape: rounded
+### Rounded: sm
 
 Messages can have different shapes. The following example shows the rounded shape.
 
@@ -38,7 +38,7 @@ Messages can have different shapes. The following example shows the rounded shap
 
 <br />
 
-### Shape: smooth
+### Rounded: md
 
 Messages can have different shapes. The following example shows the smooth shape.
 
@@ -48,7 +48,7 @@ Messages can have different shapes. The following example shows the smooth shape
 
 <br />
 
-### Shape: curved
+### Rounded: lg
 
 Messages can have different shapes. The following example shows the curved shape.