Merge pull request #45 from vividroyjeong/feature/storybook

Feature/storybook

frontend/.storybook/preview.ts

@@ -3,6 +3,8 @@ import { setup } from '@storybook/vue3'
 import { registerPlugins } from '../src/plugins'
 import { withVuetifyTheme } from './withVeutifyTheme.decorator'
 import type { App } from 'vue'
+import '@bcgov/bc-sans/css/BCSans.css'
+import '../src/styles/style.scss'
 
 const preview: Preview = {
   parameters: {
@@ -28,7 +30,17 @@ const preview: Preview = {
       },
     },
   },
-  decorators: [withVuetifyTheme],
+  decorators: [
+    withVuetifyTheme,
+    (story) => ({
+      components: { story },
+      template: `
+        <div style="font-family: 'BCSans', 'Noto Sans', Verdana, Arial, sans-serif;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
 }
 
 export default preview

frontend/src/App.vue

@@ -3,9 +3,7 @@
     <TheHeader />
 
     <v-main id="main">
-      <AppMessageDialog />
       <AppNotification />
-      <AppConfirmDialog />
       <AppDialogDragger />
 
       <DefaultLayout>
@@ -16,9 +14,7 @@
 </template>
 <script setup lang="ts">
 import TheHeader from '@/components/layout/TheHeader.vue'
-import AppMessageDialog from '@/components/common/AppMessageDialog.vue'
 import AppNotification from '@/components/common/AppNotification.vue'
-import AppConfirmDialog from '@/components/common/AppConfirmDialog.vue'
 import AppDialogDragger from '@/components/common/AppDialogDragger.vue'
 import DefaultLayout from '@/layouts/DefaultLayout.vue'
 </script>

frontend/src/components/common/AppMessageDialog.stories.ts

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AppMessageDialog from '@/components/common/AppMessageDialog.vue'
+
+const meta: Meta<typeof AppMessageDialog> = {
+  title: 'components/common/AppMessageDialog',
+  component: AppMessageDialog,
+  argTypes: {
+    dialog: {
+      control: 'boolean',
+      description: 'Dialog visibility',
+      defaultValue: true,
+    },
+    title: {
+      control: 'text',
+      description: 'Dialog title',
+      defaultValue: 'VDYP Message',
+    },
+    message: {
+      control: 'text',
+      description: 'Dialog message',
+      defaultValue: 'This is a message.',
+    },
+    dialogWidth: {
+      control: { type: 'range', min: 200, max: 800, step: 50 },
+      description: 'Dialog width',
+      defaultValue: 400,
+    },
+    dialogBorderRadius: {
+      control: { type: 'range', min: 0, max: 50, step: 1 },
+      description: 'Dialog border radius',
+      defaultValue: 8,
+    },
+    btnLabel: {
+      control: 'text',
+      description: 'Button label',
+      defaultValue: 'OK',
+    },
+    headerBackground: {
+      control: 'color',
+      description: 'Background color for header',
+      defaultValue: '#003366',
+    },
+    headerColor: {
+      control: 'color',
+      description: 'Color for header',
+      defaultValue: '#ffffff',
+    },
+    actionsBackground: {
+      control: 'color',
+      description: 'Background color for actions',
+      defaultValue: '#f6f6f6',
+    },
+    'onUpdate:dialog': {
+      action: 'update:dialog',
+      description: 'Emitted when dialog state changes',
+    },
+    onClose: {
+      action: 'close',
+      description: 'Emitted when close button is clicked',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof AppMessageDialog>
+
+export const Primary: Story = {
+  args: {
+    dialog: true,
+    title: 'Missing Information',
+    message:
+      'Input field is missing essential information which must be filled in order to confirm and continue.',
+    dialogWidth: 400,
+    dialogBorderRadius: 8,
+    btnLabel: 'Continue Editing',
+    headerBackground: '#003366',
+    headerColor: '#ffffff',
+    actionsBackground: '#f6f6f6',
+  },
+}

frontend/src/components/common/AppMessageDialog.vue

@@ -1,17 +1,16 @@
 <template>
   <v-dialog
-    v-model="dialog"
+    :model-value="computedDialog"
+    @update:model-value="updateDialog"
     persistent
-    :max-width="options && options.width ? options.width : '400'"
+    :max-width="computedDialogWidth"
   >
-    <v-card>
-      <v-card-title
-        style="font-weight: 300 !important; padding-left: 30px !important"
-        class="popup-header"
-        >{{ title || 'VDYP Message' }}</v-card-title
-      >
+    <v-card :style="computedDialogStyle">
+      <v-card-title :style="computedHeaderStyle" class="popup-header">
+        {{ computedTitle }}
+      </v-card-title>
       <v-card-text
-        v-show="Boolean(message)"
+        v-show="Boolean(computedMessage)"
         class="pa-4"
         style="
           font-size: 14px;
@@ -20,37 +19,79 @@
           white-space: pre-line;
         "
       >
-        {{ message }}
+        {{ computedMessage }}
       </v-card-text>
       <v-card-actions
         class="pt-3"
-        style="background-color: #f6f6f6; border-top: 1px solid #0000001f"
+        :style="{
+          backgroundColor: computedActionsBackground,
+          borderTop: '1px solid #0000001f',
+        }"
       >
         <v-spacer></v-spacer>
         <v-btn class="blue-btn ml-2" @click="agree">{{
-          btnLabel || 'OK'
+          computedBtnLabel
         }}</v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useMessageDialogStore } from '@/stores/common/messageDialogStore'
+import { defineProps, defineEmits, computed } from 'vue'
+import { BUTTON_LABEL } from '@/constants/constants'
+
+const props = defineProps<{
+  dialog?: boolean
+  title?: string
+  message?: string
+  dialogWidth?: number
+  dialogBorderRadius?: number
+  btnLabel?: string
+  headerBackground?: string
+  headerColor?: string
+  actionsBackground?: string
+}>()
+
+const emit = defineEmits(['update:dialog', 'close'])
+
+const computedDialog = computed(() => props.dialog ?? false)
+const computedTitle = computed(() => props.title ?? '')
+const computedMessage = computed(() => props.message ?? '')
+const computedDialogWidth = computed(() => props.dialogWidth ?? 400)
+const computedBtnLabel = computed(
+  () => props.btnLabel ?? BUTTON_LABEL.CONT_EDIT,
+)
 
-const messageDialogStore = useMessageDialogStore()
+const computedHeaderStyle = computed(() => {
+  return {
+    fontWeight: '300 !important',
+    paddingLeft: '30px !important',
+    padding: '1rem !important',
+    background: props.headerBackground ?? '#003366 !important',
+    color: props.headerColor ?? '#ffffff !important',
+  }
+})
 
-const dialog = computed(() => messageDialogStore.isOpen)
-const title = computed(() => messageDialogStore.dialogTitle || 'VDYP Message')
-const message = computed(() => messageDialogStore.dialogMessage || '')
-const btnLabel = computed(() => messageDialogStore.dialogBtnLabel || 'OK')
-const options = computed(
-  () => messageDialogStore.dialogOptions || { width: '400px' },
+const computedActionsBackground = computed(
+  () => props.actionsBackground ?? '#f6f6f6 !important;',
 )
 
+const computedDialogStyle = computed(() => {
+  return {
+    borderRadius: `${props.dialogBorderRadius ?? 8}px`,
+  }
+})
+
+// Emit updates for dialog visibility
+const updateDialog = (value: boolean) => {
+  emit('update:dialog', value)
+}
+
+// Emit close event and close the dialog
 const agree = () => {
-  messageDialogStore.agree()
+  emit('update:dialog', false)
+  emit('close')
 }
 </script>
 

frontend/src/components/common/AppNotification.vue

@@ -1,49 +1,24 @@
 <template>
-  <div>
-    <v-snackbar
-      v-model="isShow"
-      :timeout="NOTIFICATION.SHOW_TIME"
-      :color="type || 'info'"
-      class="elevation-12"
-      location="top"
-      @click:outside="closeMessage"
-    >
-      <div class="d-flex align-center">
-        <v-icon class="mr-2">{{ getIcon(type) }}</v-icon>
-        <span> {{ message || 'Notification message' }}</span>
-      </div>
-
-      <template #actions>
-        <v-btn icon variant="text" @click="closeMessage">
-          <v-icon>mdi-close</v-icon>
-        </v-btn>
-      </template>
-    </v-snackbar>
-  </div>
+  <AppSnackbar
+    :is-visible="isShow"
+    :message="message"
+    :type="type"
+    :color="color"
+    :timeout="NOTIFICATION.SHOW_TIME"
+    @close="closeMessage"
+  />
 </template>
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import { useNotificationStore } from '@/stores/common/notificationStore'
-import type { MessageType } from '@/types/types'
+import AppSnackbar from './AppSnackbar.vue'
 import { NOTIFICATION } from '@/constants/constants'
 
 const notificationStore = useNotificationStore()
 
-const { isShow, message, type } = storeToRefs(notificationStore)
+const { isShow, message, type, color } = storeToRefs(notificationStore)
 
 const closeMessage = () => {
   notificationStore.resetMessage()
 }
-
-const getIcon = (type: MessageType) => {
-  const icon: { [key in MessageType]: string } = {
-    '': '',
-    info: 'mdi-information',
-    success: 'mdi-check-circle',
-    error: 'mdi-alert-circle',
-    warning: 'mdi-alert',
-  }
-
-  return icon[type] || 'mdi-information'
-}
 </script>

frontend/src/components/common/AppProgressCircular.stories.ts

@@ -7,6 +7,11 @@ const meta: Meta<typeof AppProgressCircular> = {
   argTypes: {
     isShow: { control: { type: 'boolean' }, defaultValue: true },
     showMessage: { control: { type: 'boolean' }, defaultValue: true },
+    hasBackground: {
+      control: { type: 'boolean' },
+      defaultValue: true,
+      description: 'Whether the background color is applied',
+    },
     message: { control: { type: 'text' }, defaultValue: 'Loading...' },
     circleSize: {
       control: { type: 'range', min: 10, max: 200, step: 1 },
@@ -28,11 +33,6 @@ const meta: Meta<typeof AppProgressCircular> = {
       defaultValue: 'rgba(255, 255, 255, 0.8)',
       description: 'Background color of the wrapper div',
     },
-    hasBackground: {
-      control: { type: 'boolean' },
-      defaultValue: true,
-      description: 'Whether the background color is applied',
-    },
     padding: {
       control: { type: 'range', min: 0, max: 50, step: 1 },
       defaultValue: 20,
@@ -54,28 +54,13 @@ export const Primary: Story = {
   args: {
     isShow: true,
     showMessage: true,
+    hasBackground: true,
     message: 'Loading...',
     circleSize: 70,
     circleWidth: 5,
     circleColor: 'primary',
     backgroundColor: 'rgba(255, 255, 255, 0.8)',
-    hasBackground: true,
     padding: 20,
     borderRadius: 10,
   },
 }
-
-export const NoBackground: Story = {
-  args: {
-    ...Primary.args,
-    hasBackground: false,
-  },
-}
-
-export const LargeCircle: Story = {
-  args: {
-    ...Primary.args,
-    circleSize: 150,
-    circleWidth: 10,
-  },
-}