Maintenance: Drop Daisy UI library

zammad · May 7, 2024 · 3f61aa6 · 3f61aa6
1 parent f7b6aa4
commit 3f61aa6
Show file tree

Hide file tree

Showing 14 changed files with 56 additions and 122 deletions.
diff --git a/app/frontend/apps/desktop/components/CommonButton/CommonButton.vue b/app/frontend/apps/desktop/components/CommonButton/CommonButton.vue
@@ -27,10 +27,9 @@ const props = withDefaults(defineProps<Props>(), {
 const variantClasses = computed(() => {
   switch (props.variant) {
     case 'primary':
-      return ['btn-primary', 'bg-blue-800', 'hover:bg-blue-800', 'text-white']
+      return ['bg-blue-800', 'hover:bg-blue-800', 'text-white']
     case 'tertiary':
       return [
-        'btn-neutral',
         'bg-green-200',
         'hover:bg-green-200',
         'dark:bg-gray-600',
@@ -39,15 +38,9 @@ const variantClasses = computed(() => {
         'dark:text-neutral-400',
       ]
     case 'submit':
-      return [
-        'btn-accent',
-        'bg-yellow-300',
-        'hover:bg-yellow-300',
-        'text-black',
-      ]
+      return ['bg-yellow-300', 'hover:bg-yellow-300', 'text-black']
     case 'danger':
       return [
-        'btn-error',
         'bg-pink-100',
         'hover:bg-pink-100',
         'dark:bg-red-900',
@@ -56,7 +49,6 @@ const variantClasses = computed(() => {
       ]
     case 'remove':
       return [
-        'btn-info',
         'bg-red-400',
         'hover:bg-red-400',
         'dark:bg-red-600',
@@ -65,7 +57,6 @@ const variantClasses = computed(() => {
       ]
     case 'subtle':
       return [
-        'btn-ghost',
         'bg-blue-600',
         'dark:bg-blue-900',
         'hover:bg-blue-600',
@@ -75,20 +66,14 @@ const variantClasses = computed(() => {
       ]
     case 'neutral':
       return [
-        'btn-secondary',
         'bg-transparent',
         'hover:bg-transparent',
         'text-gray-100',
         'dark:text-neutral-400',
       ]
     case 'secondary':
     default:
-      return [
-        'btn-secondary',
-        'bg-transparent',
-        'hover:bg-transparent',
-        'text-blue-800',
-      ]
+      return ['bg-transparent', 'hover:bg-transparent', 'text-blue-800']
   }
 })
 
@@ -152,7 +137,7 @@ const iconSizeClass = computed(() => {
 
 <template>
   <button
-    class="btn h-min min-h-min flex-nowrap gap-x-1 border-0 font-normal shadow-none hover:outline hover:outline-1 hover:outline-offset-1 hover:outline-blue-600 focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 dark:hover:outline-blue-900"
+    class="inline-flex h-min min-h-min flex-shrink-0 flex-nowrap items-center justify-center gap-x-1 border-0 font-normal shadow-none transition duration-200 hover:outline hover:outline-1 hover:outline-offset-1 hover:outline-blue-600 focus:outline-none focus:outline-0 focus:outline-offset-0 focus:hover:outline focus:hover:outline-1 focus:hover:outline-offset-1 focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 focus:active:scale-[95%] dark:hover:outline-blue-900"
     :class="[
       ...variantClasses,
       ...sizeClasses,

diff --git a/app/frontend/apps/desktop/components/CommonButton/__tests__/CommonButton.spec.ts b/app/frontend/apps/desktop/components/CommonButton/__tests__/CommonButton.spec.ts
@@ -10,7 +10,7 @@ describe('CommonButton.vue', () => {
     const button = view.getByRole('button')
 
     expect(button).toHaveAttribute('type', 'button')
-    expect(button).toHaveClasses(['btn', 'btn-secondary', 'btn-sm'])
+    expect(button).toHaveClasses(['inline-flex', 'bg-transparent', 'btn-sm'])
   })
 
   it('renders default slot as the button label', async () => {
@@ -66,35 +66,35 @@ describe('CommonButton.vue', () => {
   it.each([
     {
       variant: 'primary',
-      classes: ['btn-primary'],
+      classes: ['bg-blue-800'],
     },
     {
       variant: 'secondary',
-      classes: ['btn-secondary'],
+      classes: ['bg-transparent'],
     },
     {
       variant: 'tertiary',
-      classes: ['btn-neutral'],
+      classes: ['bg-green-200'],
     },
     {
       variant: 'submit',
-      classes: ['btn-accent'],
+      classes: ['bg-yellow-300'],
     },
     {
       variant: 'danger',
-      classes: ['btn-error'],
+      classes: ['bg-pink-100'],
     },
     {
       variant: 'remove',
-      classes: ['btn-info'],
+      classes: ['bg-red-400'],
     },
     {
       variant: 'subtle',
-      classes: ['btn-ghost'],
+      classes: ['bg-blue-600'],
     },
     {
       variant: 'neutral',
-      classes: ['btn-secondary'],
+      classes: ['bg-transparent'],
     },
   ])('supports $variant variant', async ({ variant, classes }) => {
     const view = renderComponent(CommonButton, {

diff --git a/app/frontend/apps/desktop/components/CommonButtonGroup/__tests__/CommonButtonGroup.spec.ts b/app/frontend/apps/desktop/components/CommonButtonGroup/__tests__/CommonButtonGroup.spec.ts
@@ -48,7 +48,7 @@ describe('CommonButtonGroup.vue', () => {
 
     const primaryButton = buttons[0]
     expect(primaryButton).toHaveAttribute('type', 'button')
-    expect(primaryButton).toHaveClasses(['btn-primary', 'bg-blue-800'])
+    expect(primaryButton).toHaveClasses(['bg-blue-800', 'bg-blue-800'])
     expect(getByIconName(primaryButton, 'logo-flat')).toBeInTheDocument()
 
     await view.events.click(primaryButton)
@@ -58,6 +58,6 @@ describe('CommonButtonGroup.vue', () => {
     expect(submitButton).toHaveAttribute('type', 'submit')
 
     const dangerButton = buttons[4]
-    expect(dangerButton).toHaveClasses(['btn-error', 'text-red-500'])
+    expect(dangerButton).toHaveClasses(['bg-pink-100', 'text-red-500'])
   })
 })
diff --git a/...ps/desktop/components/CommonConfirmationDialog/__tests__/CommonConfirmationDialog.spec.ts b/...ps/desktop/components/CommonConfirmationDialog/__tests__/CommonConfirmationDialog.spec.ts
@@ -90,7 +90,7 @@ describe('dialog confirm behaviour', () => {
     ).toBeInTheDocument()
     expect(
       wrapper.getByRole('button', { name: 'Custom button title' }),
-    ).toHaveClass('btn-error')
+    ).toHaveClass('bg-pink-100')
   })
 
   it('closes the confirmation dialog by using cancel', async () => {

diff --git a/app/frontend/apps/desktop/components/CommonProgressBar/CommonProgressBar.vue b/app/frontend/apps/desktop/components/CommonProgressBar/CommonProgressBar.vue
@@ -21,14 +21,14 @@ defineProps<Props>()
 
 <style scoped>
 .progress {
-  @apply rounded-box h-2 bg-blue-200 dark:bg-gray-700;
+  @apply h-2 rounded-2xl bg-blue-200 dark:bg-gray-700;
 
   &::-moz-progress-bar {
     @apply rounded-none bg-blue-800;
   }
 
   &::-webkit-progress-bar {
-    @apply rounded-box;
+    @apply rounded-2xl;
   }
 
   &::-webkit-progress-value {

diff --git a/...pps/desktop/components/CommonSimpleTable/__tests__/CommonSimpleTable.spec.ts.snapshot.txt b/...pps/desktop/components/CommonSimpleTable/__tests__/CommonSimpleTable.spec.ts.snapshot.txt
@@ -102,7 +102,7 @@
           <button
             aria-haspopup="true"
             aria-label="Action menu button"
-            class="btn h-min min-h-min flex-nowrap gap-x-1 border-0 font-normal shadow-none hover:outline hover:outline-1 hover:outline-offset-1 hover:outline-blue-600 focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 dark:hover:outline-blue-900 btn-secondary bg-transparent hover:bg-transparent text-blue-800 btn-md text-sm p-1 rounded-lg w-min text-stone-200 dark:text-neutral-500"
+            class="inline-flex h-min min-h-min flex-shrink-0 flex-nowrap items-center justify-center gap-x-1 border-0 font-normal shadow-none transition duration-200 hover:outline hover:outline-1 hover:outline-offset-1 hover:outline-blue-600 focus:outline-none focus:outline-0 focus:outline-offset-0 focus:hover:outline focus:hover:outline-1 focus:hover:outline-offset-1 focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 focus:active:scale-[95%] dark:hover:outline-blue-900 bg-transparent hover:bg-transparent text-blue-800 btn-md text-sm p-1 rounded-lg w-min text-stone-200 dark:text-neutral-500"
             id="action-menu-1"
             type="button"
           >

diff --git a/app/frontend/apps/desktop/components/Form/fields/FieldDate/FieldDateTimeInput.vue b/app/frontend/apps/desktop/components/Form/fields/FieldDate/FieldDateTimeInput.vue
@@ -173,7 +173,7 @@ const dark = computed(() => theme.value === 'dark')
   --dp-primary-text-color: theme(colors.white);
   --dp-secondary-color: theme(colors.stone.200);
   --dp-border-color: theme(colors.transparent);
-  --dp-menu-border-color: theme(colors[neutral-100]);
+  --dp-menu-border-color: theme(colors.neutral.100);
   --dp-border-color-hover: theme(colors.transparent);
   --dp-disabled-color: theme(colors.transparent);
   --dp-disabled-color-text: theme(colors.stone.200);
@@ -188,7 +188,7 @@ const dark = computed(() => theme.value === 'dark')
   --dp-highlight-color: theme(colors.blue.800);
   --dp-range-between-dates-background-color: theme(colors.blue.500);
   --dp-range-between-dates-text-color: theme(colors.blue.800);
-  --dp-range-between-border-color: theme(colors[neutral-100]);
+  --dp-range-between-border-color: theme(colors.neutral.100);
   --dp-input-background-color: theme(colors.blue.200);
 
   .dp {
@@ -225,17 +225,17 @@ const dark = computed(() => theme.value === 'dark')
   --dp-primary-color: theme(colors.blue.800);
   --dp-primary-disabled-color: theme(colors.blue.950);
   --dp-primary-text-color: theme(colors.white);
-  --dp-secondary-color: theme(colors[neutral-500]);
+  --dp-secondary-color: theme(colors.neutral.500);
   --dp-border-color: theme(colors.transparent);
   --dp-menu-border-color: theme(colors.gray.900);
   --dp-border-color-hover: theme(colors.transparent);
   --dp-disabled-color: theme(colors.transparent);
-  --dp-disabled-color-text: theme(colors[neutral-500]);
+  --dp-disabled-color-text: theme(colors.neutral.500);
   --dp-scroll-bar-background: theme(colors.gray.700);
   --dp-scroll-bar-color: theme(colors.gray.400);
   --dp-success-color: theme(colors.green.500);
   --dp-success-color-disabled: theme(colors.green.900);
-  --dp-icon-color: theme(colors[neutral-500]);
+  --dp-icon-color: theme(colors.neutral.500);
   --dp-danger-color: theme(colors.red.500);
   --dp-marker-color: theme(colors.blue.700);
   --dp-tooltip-color: theme(colors.gray.700);
@@ -264,7 +264,7 @@ const dark = computed(() => theme.value === 'dark')
 
     &__button,
     &__action_button {
-      color: theme(colors[neutral-400]);
+      color: theme(colors.neutral.400);
       background: theme(colors.gray.600);
     }
   }

diff --git a/app/frontend/apps/desktop/components/layout/LayoutPage.vue b/app/frontend/apps/desktop/components/layout/LayoutPage.vue
@@ -25,7 +25,7 @@ const {
 
 <template>
   <div
-    class="grid h-full transition-[grid-template-columns] duration-100"
+    class="grid h-full duration-100"
     :class="{ 'transition-none': noTransition }"
     :style="gridColumns"
   >

diff --git a/app/frontend/apps/desktop/initializer/initializeGlobalComponentStyles.ts b/app/frontend/apps/desktop/initializer/initializeGlobalComponentStyles.ts
@@ -10,25 +10,24 @@ import { initializeNotificationClasses } from '#shared/initializer/initializeNot
 
 export const initializeGlobalComponentStyles = () => {
   initializeBadgeClasses({
-    base: 'badge border-0',
+    base: 'inline-flex justify-center items-center border-0',
     success:
-      'badge-success bg-green-300 text-green-500 dark:bg-green-900 dark:text-green-500',
-    info: 'badge-info bg-blue-500 text-blue-800 dark:bg-blue-950 dark:text-blue-800',
+      'bg-green-300 text-green-500 dark:bg-green-900 dark:text-green-500',
+    info: 'bg-blue-500 text-blue-800 dark:bg-blue-950 dark:text-blue-800',
     warning:
-      'badge-warning bg-yellow-50 text-yellow-600 dark:bg-yellow-900 dark:text-yellow-600',
-    danger:
-      'badge-error bg-pink-100 text-red-500 dark:bg-red-900 dark:text-red-500',
+      'bg-yellow-50 text-yellow-600 dark:bg-yellow-900 dark:text-yellow-600',
+    danger: 'bg-pink-100 text-red-500 dark:bg-red-900 dark:text-red-500',
     neutral:
-      'badge-neutral bg-blue-200 text-stone-200 dark:bg-gray-700 dark:text-neutral-500',
+      'bg-blue-200 text-stone-200 dark:bg-gray-700 dark:text-neutral-500',
     custom: 'badge-custom',
   })
 
   initializeAlertClasses({
-    base: 'alert w-auto text-sm',
-    success: 'alert-success bg-green-300 dark:bg-green-900 text-green-500',
-    info: 'alert-info bg-blue-500 dark:bg-blue-950 text-blue-800',
-    warning: 'alert-warning bg-yellow-50 dark:bg-yellow-900 text-yellow-600',
-    danger: 'alert-error bg-pink-100 dark:bg-red-900 text-red-500',
+    base: 'grid gap-4 text-center md:text-start text-sm items-center justify-center md:justify-start grid-flow-row md:grid-flow-col md:grid-cols-[auto_minmax(auto,_1fr)] w-full md:w-auto',
+    success: 'bg-green-300 dark:bg-green-900 text-green-500',
+    info: 'bg-blue-500 dark:bg-blue-950 text-blue-800',
+    warning: 'bg-yellow-50 dark:bg-yellow-900 text-yellow-600',
+    danger: 'bg-pink-100 dark:bg-red-900 text-red-500',
     link: 'hover:underline',
   })
 
@@ -60,12 +59,12 @@ export const initializeGlobalComponentStyles = () => {
   })
 
   initializeNotificationClasses({
-    base: 'alert rounded-lg gap-1.5 p-2 border-transparent',
+    base: 'grid gap-4 text-center md:text-start text-sm items-center justify-center md:justify-start grid-flow-row md:grid-flow-col md:grid-cols-[auto_minmax(auto,_1fr)] w-full rounded-lg gap-1.5 p-2 border-transparent',
     baseContainer: 'mx-auto',
-    error: 'alert-error bg-pink-100 dark:bg-red-900 text-red-500',
-    info: 'alert-info bg-blue-500 dark:bg-blue-950 text-blue-800',
+    error: 'bg-pink-100 dark:bg-red-900 text-red-500',
+    info: 'bg-blue-500 dark:bg-blue-950 text-blue-800',
     message: '',
-    success: 'alert-success bg-green-300 dark:bg-green-900 text-green-500',
-    warn: 'alert-warning bg-yellow-50 dark:bg-yellow-900 text-yellow-600',
+    success: 'bg-green-300 dark:bg-green-900 text-green-500',
+    warn: 'bg-yellow-50 dark:bg-yellow-900 text-yellow-600',
   })
 }
diff --git a/app/frontend/apps/desktop/pages/personal-setting/views/PersonalSetting.vue b/app/frontend/apps/desktop/pages/personal-setting/views/PersonalSetting.vue
@@ -15,10 +15,7 @@ const { gridColumns, collapseSidebar, expandSidebar } =
 </script>
 
 <template>
-  <div
-    class="grid h-full transition-[grid-template-columns] duration-100"
-    :style="gridColumns"
-  >
+  <div class="grid h-full duration-100" :style="gridColumns">
     <LayoutSidebar
       id="personal-settings-sidebar"
       :name="storageKeyId"

diff --git a/app/frontend/apps/desktop/styles/tailwind.desktop.js b/app/frontend/apps/desktop/styles/tailwind.desktop.js
@@ -2,7 +2,6 @@
 
 const formKitTailwind = require('@formkit/themes/tailwindcss')
 const path = require('path')
-const daisyTailwind = require('daisyui')
 const unimportantTailwind = require('tailwindcss-unimportant')
 
 const zammadTailwind = require('../../../build/zammadTailwindPlugin.js')
@@ -17,12 +16,7 @@ module.exports = {
     `${desktopDir}/**/*.{js,jsx,ts,tsx,vue,css}`,
     `${sharedDir}/**/*.{js,jsx,ts,tsx,vue,css}`,
   ],
-  plugins: [
-    formKitTailwind,
-    zammadTailwind,
-    daisyTailwind,
-    unimportantTailwind,
-  ],
+  plugins: [formKitTailwind, zammadTailwind, unimportantTailwind],
   theme: {
     colors: {
       alpha: {
@@ -91,6 +85,14 @@ module.exports = {
         300: '#EA4D84',
         500: '#FF006B',
       },
+      neutral: {
+        100: '#E5E5E5',
+        200: '#E3E3E3',
+        300: '#DCDCDC',
+        400: '#D1D1D1',
+        500: '#999999',
+        950: '#191919',
+      },
     },
     extend: {
       width: {
@@ -103,26 +105,6 @@ module.exports = {
       maxWidth: {
         150: '600px',
       },
-      // NB: daisyUI overrides `neutral` color as a last step.
-      //   Here we apply our original theme values by using the same way they were overridden (via full class name).
-      //   https://github.com/saadeghi/daisyui/issues/2368
-      colors: {
-        'neutral-100': '#E5E5E5',
-        'neutral-200': '#E3E3E3',
-        'neutral-300': '#DCDCDC',
-        'neutral-400': '#D1D1D1',
-        'neutral-500': '#999999',
-        'neutral-950': '#191919',
-      },
     },
   },
-  // XXX: daisyUI is used only in desktop view, so its classes CANNOT be used in "shared" components.
-  daisyui: {
-    base: false,
-    // Do not show info about daisyUI version and used config in the console when building CSS.
-    logs: false,
-    // Disable all daisyUI themes which in turn disables all built-in colors.
-    //   https://daisyui.com/docs/themes/#-2
-    themes: [],
-  },
 }
diff --git a/app/frontend/shared/components/CommonAlert/CommonAlert.vue b/app/frontend/shared/components/CommonAlert/CommonAlert.vue
@@ -46,7 +46,7 @@ const dismissed = ref(false)
     role="alert"
     data-test-id="common-alert"
   >
-    <CommonIcon size="small" decorative :name="icon" />
+    <CommonIcon class="mx-auto md:mx-0" size="small" decorative :name="icon" />
 
     <slot />
 
@@ -69,7 +69,7 @@ const dismissed = ref(false)
         size="small"
         decorative
         name="common-alert-dismiss"
-        class="cursor-pointer ltr:mr-2 rtl:ml-2"
+        class="mx-auto cursor-pointer md:mx-0 ltr:mr-2 rtl:ml-2"
         @click="dismissed = true"
       />
     </div>

diff --git a/package.json b/package.json
@@ -126,7 +126,6 @@
     "@vueuse/router": "^10.9.0",
     "@vueuse/shared": "^10.9.0",
     "async-mutex": "^0.5.0",
-    "daisyui": "^4.10.2",
     "graphql": "^16.8.1",
     "graphql-ruby-client": "^1.13.3",
     "graphql-tag": "^2.12.6",