feat(Modal): config redesign and implementation

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

Hide file tree

Showing 3 changed files with 41 additions and 26 deletions.
diff --git a/src/plugins/components/modal/index.ts b/src/plugins/components/modal/index.ts
@@ -15,56 +15,67 @@ export default plugin.withOptions(
       const config = theme(`shurikenUi.${key}`) satisfies ModalConfig
 
       addComponents({
+        //Wrapper
         [`.${prefix}modal`]: {
           [`@apply fixed inset-0 z-[9999] flex items-center justify-center`]:
             {},
-
+          //Modal:inner
           [`.${prefix}modal-inner`]: {
             [`@apply relative z-[9999]`]: {},
           },
+          //Modal:backdrop
           [`.${prefix}modal-backdrop`]: {
-            [`@apply bg-${config.backdrop.bg} dark:bg-${config.backdrop.bgDark} fixed inset-0`]:
+            [`@apply bg-${config.backdrop.background.light} dark:bg-${config.backdrop.background.dark} fixed inset-0`]:
               {},
           },
+          //Modal:content
           [`.${prefix}modal-content`]: {
             [`@apply fixed inset-0`]: {},
           },
+          //Content:inner
           [`.${prefix}modal-content-inner`]: {
-            [`@apply flex w-full min-h-full items-center justify-center p-${config.contentInner.space} text-center`]:
+            [`@apply flex w-full min-h-full items-center justify-center p-${config.inner.padding} text-center`]:
               {},
           },
+          //Content:panel
           [`.${prefix}modal-content-panel`]: {
-            [`@apply w-${config.contentPanel.size} text-${config.contentPanel.text} align-middle transition-all`]:
+            [`@apply w-${config.panel.size} text-${config.panel.align} align-middle transition-all`]:
               {},
           },
+          //Size:sm
           [`&.${prefix}modal-sm`]: {
             [`.${prefix}modal-content-panel`]: {
-              [`@apply max-w-${config.modalSM}`]: {},
+              [`@apply max-w-${config.size.sm}`]: {},
             },
           },
+          //Size:md
           [`&.${prefix}modal-md`]: {
             [`.${prefix}modal-content-panel`]: {
-              [`@apply max-w-${config.modalMD}`]: {},
+              [`@apply max-w-${config.size.md}`]: {},
             },
           },
+          //Size:lg
           [`&.${prefix}modal-lg`]: {
             [`.${prefix}modal-content-panel`]: {
-              [`@apply max-w-${config.modalLG}`]: {},
+              [`@apply max-w-${config.size.lg}`]: {},
             },
           },
+          //Size:xl
           [`&.${prefix}modal-xl`]: {
             [`.${prefix}modal-content-panel`]: {
-              [`@apply max-w-${config.modalXL}`]: {},
+              [`@apply max-w-${config.size.xl}`]: {},
             },
           },
+          //Size:2xl
           [`&.${prefix}modal-2xl`]: {
             [`.${prefix}modal-content-panel`]: {
-              [`@apply max-w-${config.modal2XL}`]: {},
+              [`@apply max-w-${config.size.xxl}`]: {},
             },
           },
+          //Size:3xl
           [`&.${prefix}modal-3xl`]: {
             [`.${prefix}modal-content-panel`]: {
-              [`@apply max-w-${config.modal3XL}`]: {},
+              [`@apply max-w-${config.size.xxxl}`]: {},
             },
           },
         },

diff --git a/src/plugins/components/modal/modal.config.ts b/src/plugins/components/modal/modal.config.ts
@@ -2,22 +2,26 @@ export const key = 'modal' as const
 
 export const defaultConfig = {
   backdrop: {
-    bg: 'muted-800/70',
-    bgDark: 'muted-900/80',
+    background: {
+      light: 'muted-800/70',
+      dark: 'muted-900/80',
+    },
   },
-  contentInner: {
-    space: '4',
+  inner: {
+    padding: '4',
   },
-  contentPanel: {
+  panel: {
     size: 'full',
-    text: 'start',
+    align: 'start',
+  },
+  size: {
+    sm: 'sm',
+    md: 'md',
+    lg: 'xl',
+    xl: '2xl',
+    xxl: '3xl',
+    xxxl: '5xl',
   },
-  modalSM: 'sm',
-  modalMD: 'md',
-  modalLG: 'xl',
-  modalXL: '2xl',
-  modal2XL: '3xl',
-  modal3XL: '5xl',
 }
 
 export type ModalConfig = typeof defaultConfig

diff --git a/src/plugins/components/modal/modal.stories.ts b/src/plugins/components/modal/modal.stories.ts
@@ -18,7 +18,7 @@ const meta = {
   argTypes: {
     size: {
       control: { type: 'select' },
-      options: ['sm', 'md', 'lg', 'xl'],
+      options: ['sm', 'md', 'lg', 'xl', '2xl', '3xl'],
       defaultValue: 'md',
     },
   },
@@ -52,7 +52,7 @@ export const Solid: Story = {
               children: 'Invitation',
             })}
             ${ButtonClose({
-              shape: 'full',
+              rounded: 'full',
             })}
           </div>
           <!-- Body -->
@@ -90,13 +90,13 @@ export const Solid: Story = {
               ${Button({
                 size: 'md',
                 flavor: 'solid',
-                shape: 'smooth',
+                rounded: 'md',
                 children: 'Cancel',
               })}
               ${Button({
                 size: 'md',
                 flavor: 'solid',
-                shape: 'smooth',
+                rounded: 'md',
                 color: 'primary',
                 children: 'Confirm',
               })}