@usssa/component-library 1.0.0-alpha.13 → 1.0.0-alpha.131

package/src/composables/useScreenType.js

@@ -0,0 +1,30 @@
+import { computed, ref, watch } from 'vue'
+import { useQuasar } from 'quasar'
+
+export const useScreenType = () => {
+  const $q = useQuasar()
+
+  const getScreenType = () => {
+    if ($q.screen.xs) return 'mobile' // Extra small screens (phones)
+    if ($q.screen.sm) return 'tablet' // Small screens (tablets)
+    return 'desktop' // Default is desktop
+  }
+
+  const screenType = ref(getScreenType())
+
+  const screen = computed(() => ({
+    isDesktop: screenType.value === 'desktop',
+    isMobile: screenType.value === 'mobile',
+    isTablet: screenType.value === 'tablet',
+  }))
+
+  // Watch for Quasar's screen changes and update `screenType`
+  watch(
+    () => $q.screen.name,
+    () => {
+      screenType.value = getScreenType()
+    }
+  )
+
+  return screen
+}

package/src/css/app.sass

@@ -0,0 +1,168 @@
+@import './vars/colors.variables'
+@import './colors'
+@import './typography'
+@import 'flag-icons/css/flag-icons.min'
+
+// @import './media'
+
+*
+  font-family: 'neue-haas-grotesk-text', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'
+
+//FOCUS CLASSES
+
+.focus-primary
+    &:focus
+        box-shadow: 0 0 0 2px rgba(35, 75, 169, .20)
+
+.focus-positive
+    &:focus
+        box-shadow: 0 0 0 2px rgba(36, 133, 96, .20)
+
+.focus-warning
+    &:focus
+        box-shadow: 0 0 0 2px rgba(254, 78, 17, .20)
+
+.focus-accent
+    &:focus
+        box-shadow: 0 0 0 2px rgba(203, 42, 61, .20)
+
+.focus-info
+    &:focus
+        box-shadow: 0 0 0 2px rgba(92, 74, 184, .20)
+
+.focus-neutral
+    &:focus
+        box-shadow: 0 0 0 2px rgba(220, 225, 233, .20)
+
+//Shadow CLASSES
+
+.shadow-1
+    box-shadow: 0px 0px 4px 0px rgba(16, 17, 20, 0.08)
+
+.shadow-2
+    box-shadow: 0px 0px 8px 0px rgba(16, 17, 20, 0.12)
+
+.shadow-3
+    box-shadow: 0px 12px 12px 0px rgba(16, 17, 20, 0.16)
+
+.shadow-4
+    box-shadow: 0px 0px 16px 0px rgba(16, 17, 20, 0.20)
+
+.shadow-down-1
+    box-shadow: 0px 2px 2px 0px rgba(16, 17, 20, 0.04)
+
+.shadow-down-2
+    box-shadow: 0px 4px 4px 0px rgba(16, 17, 20, 0.08)
+
+.shadow-down-3
+    box-shadow: 0px 8px 8px 0px rgba(16, 17, 20, 0.12)
+
+.shadow-down-4
+    box-shadow: 0px 12px 12px 0px rgba(16, 17, 20, 0.16)
+
+.shadow-up-1
+    box-shadow: 0px -2px 2px 0px rgba(16, 17, 20, 0.04)
+
+.shadow-up-2
+    box-shadow: 0px -4px 4px 0px rgba(16, 17, 20, 0.08)
+
+.shadow-up-3
+    box-shadow: 0px -8px 8px 0px rgba(16, 17, 20, 0.12)
+
+.shadow-up-4
+    box-shadow: 0px -12px 12px 0px rgba(16, 17, 20, 0.16)
+
+
+// NOTIFY Custom CLASSES
+
+.u-notify
+  width: 25.25rem
+  min-height: $xxl
+  border-radius: $xs
+  padding: $sm $sm $xs $sm
+  box-shadow: 0px 0px 8px 0px rgba(16, 17, 20, 0.12)
+
+  .q-notification__actions
+    padding: 0rem 0.5rem
+
+  .q-notification__progress
+    width: 25.25rem
+    bottom: -0.5rem
+    border-radius: 0rem 0.25rem
+    height: 0.25rem
+
+  .q-notification__content
+    .q-icon
+      margin-right: $xs
+
+  .q-notification__message
+    padding: 0rem
+    > div:first-child
+      font-size: 0.875rem
+      font-weight: 500
+      line-height: 1.25rem
+      letter-spacing: 0.03333rem
+      overflow-wrap: break-word
+
+    .q-notification__caption
+      font-size: 0.75rem
+      font-weight: 400
+      line-height: 1.25rem
+      letter-spacing: 0.01786rem
+      overflow-wrap: break-word
+
+.u-notify-action-button
+  height: $lg
+  min-width: 5.5rem
+  max-width: 6.5rem
+  padding: 0rem $ba
+  border-radius: $xs
+  overflow-wrap: break-word
+  .block
+    white-space: nowrap
+    width: 6.5rem
+    overflow: hidden
+    text-overflow: ellipsis
+
+.u-notify-action-icon
+  background: transparent !important
+
+.u-action-icon-positive
+  .q-icon
+    color: $positive
+.u-action-icon-info
+  .q-icon
+    color: $info
+.u-action-icon-warning
+  .q-icon
+    color: $warning
+.u-action-icon-accent
+  .q-icon
+    color: $accent
+
+.u-type-positive
+  background: $green-2 !important
+  color: $green-7 !important
+  .q-btn
+    background: $positive
+
+.u-type-info
+  background: $purple-1 !important
+  color: $purple-7 !important
+  .q-btn
+    background: $info
+
+.u-type-warning
+  background: $orange-1 !important
+  color: $orange-7 !important
+  .q-btn
+    background: $warning
+
+.u-type-accent
+  background: $red-1 !important
+  color: $red-7 !important
+  .q-btn
+    background: $accent
+
+.icon-secondary-opacity
+  --fa-secondary-opacity: 0.20

package/src/css/colors.sass

@@ -0,0 +1,101 @@
+
+// GOLD TEXT
+.text-gold-1
+  color: $gold-1 !important
+.text-gold-2
+  color: $gold-2 !important
+.text-gold-3
+  color: $gold-3 !important
+.text-gold-4
+  color: $gold-4 !important
+.text-gold-5
+  color: $gold-5 !important
+.text-gold-6
+  color: $gold-6 !important
+.text-gold-7
+  color: $gold-7 !important
+.text-gold-8
+  color: $gold-8 !important
+.text-gold-9
+  color: $gold-9 !important
+
+// GOLD BACKGROUND
+.bg-gold-1
+  background-color: $gold-1 !important
+.bg-gold-2
+  background-color: $gold-2 !important
+.bg-gold-3
+  background-color: $gold-3 !important
+.bg-gold-4
+  background-color: $gold-4 !important
+.bg-gold-5
+  background-color: $gold-5 !important
+.bg-gold-6
+  background-color: $gold-6 !important
+.bg-gold-7
+  background-color: $gold-7 !important
+.bg-gold-8
+  background-color: $gold-8 !important
+.bg-gold-9
+  background-color: $gold-9 !important
+
+
+// NEUTRAL TEXT
+.text-neutral-1
+  color: $neutral-1 !important
+.text-neutral-2
+  color: $neutral-2 !important
+.text-neutral-3
+  color: $neutral-3 !important
+.text-neutral-4
+  color: $neutral-4 !important
+.text-neutral-5
+  color: $neutral-5 !important
+.text-neutral-6
+  color: $neutral-6 !important
+.text-neutral-7
+  color: $neutral-7 !important
+.text-neutral-8
+  color: $neutral-8 !important
+.text-neutral-9
+  color: $neutral-9 !important
+
+// RED TEXT
+.text-red-5
+  color: $red-5 !important
+
+// NEUTRAL BACKGROUND
+.bg-neutral-1
+  background-color: $neutral-1 !important
+.bg-neutral-2
+  background-color: $neutral-2 !important
+.bg-neutral-3
+  background-color: $neutral-3 !important
+.bg-neutral-4
+  background-color: $neutral-4 !important
+.bg-neutral-5
+  background-color: $neutral-5 !important
+.bg-neutral-6
+  background-color: $neutral-6 !important
+.bg-neutral-7
+  background-color: $neutral-7 !important
+.bg-neutral-8
+  background-color: $neutral-8 !important
+.bg-neutral-9
+  background-color: $neutral-9 !important
+
+//BLUE BACKGROUND
+.bg-blue-1
+  background-color: $blue-1 !important
+
+
+//USSSA Description content color
+.text-description
+  color: $description
+
+.bg-description
+  background-color: $description
+
+//USSSA Surface background color
+.bg-surface-bg-1
+  background-color: $surface-bg-1

package/src/css/media.sass

@@ -0,0 +1 @@
+

package/src/css/quasar.variables.sass

@@ -0,0 +1,121 @@
+// Quasar Sass (& SCSS) Variables
+// --------------------------------------------------
+// To customize the look and feel of this app, you can override
+// the Sass/SCSS variables found in Quasar's source Sass/SCSS files.
+
+// Check documentation for full list of Quasar variables
+
+// Your own variables (that are declared here) and Quasar's own
+// ones will be available out of the box in your .vue/.scss/.sass files
+
+// It's highly recommended to change the default colors
+// to match your app's branding.
+// Tip: Use the "Theme Builder" on Quasar's documentation website.
+
+@import 'vars/colors.variables'
+$primary   : #234BA9
+$secondary : #143066
+$accent    : #CB2A3D
+
+$dark      : #101114
+$dark-page : #121212
+
+$positive  : #248560
+$negative  : #CB2A3D
+$info      : #5C4AB8
+$warning   : #D33809
+
+// USSSA TYPOGRAPHY RESET
+$h1:        (size: 4.063rem, line-height: 5.079rem,   letter-spacing: .35px, weight: 700) !default
+$h2:        (size: 2.5rem,   line-height: 3.125rem,   letter-spacing: .35px, weight: 700) !default
+$h3:        (size: 1.5rem,   line-height: 1.875rem,   letter-spacing: .35px, weight: 700) !default
+$h4:        (size: 1.25rem,  line-height: 1.563rem,   letter-spacing: .35px, weight: 700) !default
+
+// QUASAR DEFAULTS
+$h5:        (size: 1.5rem,   line-height: 2rem,     letter-spacing: normal,    weight: 700) !default
+$h6:        (size: 1.25rem,  line-height: 2rem,     letter-spacing: .0125em,   weight: 700) !default
+
+// USSSA CUSTOM
+$h1-md: (size: 3.00rem , line-height: 3.75rem, letter-spacing: .35px, weight: bold) !default
+$h1-sm: (size: 2.50rem , line-height: 3.44rem, letter-spacing: .35px, weight: bold) !default
+
+$h2-md: (size: 2.25rem , line-height: 2.813rem, letter-spacing: .35px, weight: bold) !default
+$h2-sm: (size: 2.00rem , line-height: 2.50rem, letter-spacing: .35px, weight: bold) !default
+
+$h3-md: (size: 1.375rem , line-height: 1.719rem, letter-spacing: .35px, weight: bold) !default
+$h3-sm: (size: 1.250rem , line-height: 1.563rem, letter-spacing: .35px, weight: bold) !default
+
+$h4-md: (size: 1.125rem , line-height: 1.406rem, letter-spacing: .35px, weight: bold) !default
+$h4-sm: (size: 1.00rem , line-height: 1.25rem, letter-spacing: .35px, weight: bold) !default
+
+
+// DESKTOP
+$caption-lg: (size: 1rem,    line-height: 1.25rem,   letter-spacing: .03333rem, weight: 500) !default
+$caption-md: (size: 0.875rem,  line-height: 1.25rem, letter-spacing: .03333rem, weight: 500) !default
+$caption-sm: (size: 0.75rem,    line-height: 1.25rem,   letter-spacing: .03333rem, weight: 500) !default
+$caption-xs: (size: 0.688rem,  line-height: 1.25rem, letter-spacing: .03333rem, weight: 500) !default
+
+$body-xl:   (size: 1.25rem, line-height: 2.5rem,   letter-spacing: .03215rem,  weight: 400) !default
+$body-lg:   (size: 1.125rem, line-height: 1.75rem,   letter-spacing: .03215rem,  weight: 400) !default
+$body-md:   (size: 1.00rem, line-height: 1.5rem,   letter-spacing: .01786rem,  weight: 400) !default
+$body-sm:   (size: 0.875rem, line-height: 1.5rem,   letter-spacing: .01786rem,  weight: 400) !default
+$body-xs:   (size: 0.75rem, line-height: 1.25rem,   letter-spacing: .01786rem,  weight: 400) !default
+$body-xxs:   (size: 0.688rem, line-height: 1.25rem,   letter-spacing: .01786rem,  weight: 400) !default
+
+$overline-lg:    (size: 1.00rem,  line-height: 1.50rem,    letter-spacing: .53px,  weight: 500) !default
+$overline-md:    (size: 0.875rem,  line-height: 2rem,    letter-spacing: .53px,  weight: 500) !default
+$overline-sm:    (size: 0.75rem,  line-height: 2rem,    letter-spacing: .53px,  weight: 500) !default
+$overline-xs:    (size: 0.688rem,  line-height: 2rem,   letter-spacing: .53px,  weight: 500) !default
+
+$heading-xxxl:   (size: 3rem,    line-height: 3.75rem,   letter-spacing: -0.0156rem, weight: 700) !default
+$heading-xxl:    (size: 2.5rem,  line-height: 3.125rem, letter-spacing: 0rem, weight: 700) !default
+$heading-xl:    (size: 2.0rem,    line-height: 2.5rem,   letter-spacing: 0rem, weight: 700) !default
+$heading-lg:    (size: 1.75rem,  line-height: 2.188rem, letter-spacing: .00714rem, weight: 700) !default
+$heading-md:    (size: 1.5rem,  line-height: 1.875rem, letter-spacing: .00714rem, weight: 700) !default
+$heading-sm:    (size: 1.25rem,  line-height: 2rem, letter-spacing: 0rem, weight: 700) !default
+$heading-xs:    (size: 1.125rem,  line-height: 1.406rem, letter-spacing: .0125rem, weight: 700) !default
+$heading-xxs:    (size: 1.0rem,  line-height: 1.5rem, letter-spacing: .0125rem, weight: 700) !default
+
+// VARIABLE ASSIGNMENT
+$headings: ('h1': $h1, 'h1-md': $h1-md, 'h1-sm': $h1-sm, 'h2': $h2, 'h2-md': $h2-md, 'h2-sm': $h2-sm, 'h3': $h3, 'h3-md': $h3-md, 'h3-sm': $h3-sm, 'h4': $h4, 'h4-md': $h4-md, 'h4-sm': $h4-sm, 'h5': $h5, 'h6': $h6, 'body-xl': $body-xl, 'body-lg': $body-lg, 'body-md': $body-md, 'body-sm': $body-sm, 'body-xs': $body-xs, 'body-xxs': $body-xxs, 'overline-lg': $overline-lg, 'overline-md': $overline-md, 'overline-sm': $overline-sm,'overline-xs': $overline-xs, 'caption-lg': $caption-lg, 'caption-md': $caption-md, 'caption-sm': $caption-sm, 'caption-xs': $caption-xs, 'heading-xxxl': $heading-xxxl, 'heading-xxl':$heading-xxl,'heading-xl':$heading-xl,'heading-lg':$heading-lg,'heading-md':$heading-md,'heading-sm':$heading-sm,'heading-xs':$heading-xs,'heading-xxs': $heading-xxs) !default
+
+// SPACING BASE
+$space-base   : 1rem !default
+$space-x-base : $space-base !default
+$space-y-base : $space-base !default
+
+// SPACING SINGLE VARIABLES
+$xxs  : $space-base * .25 !default
+$xs   : $space-base * .5 !default
+$sm   : $space-base * .75 !default
+$ms   : $space-base * 1.5 !default
+$ba   : $space-base * 1 !default
+$md   : $space-base * 2 !default
+$lg   : $space-base * 2.5 !default
+$xl   : $space-base * 3 !default
+$xxl  : $space-base * 3.375 !default
+
+// SPACING VARIABLES FOR QUASAR SPACING UTILITY CLASSES
+$space-none : (x: 0, y: 0) !default
+$space-xxs   : (x: ($space-x-base * .25), y: ($space-y-base * .25)) !default
+$space-xs   : (x: ($space-x-base * .5), y: ($space-y-base * .5)) !default
+$space-sm   : (x: ($space-x-base * .75), y: ($space-y-base * .75)) !default
+$space-ms   : (x: ($space-x-base * 1.5), y: ($space-y-base * 1.5)) !default
+$space-ba : (x: ($space-x-base * 1), y: ($space-y-base * 1)) !default
+$space-md   : (x: $space-x-base * 2, y: $space-y-base * 2) !default
+$space-lg   : (x: ($space-x-base * 2.5), y: ($space-y-base * 2.5)) !default
+$space-xl   : (x: ($space-x-base * 3), y: ($space-y-base * 3)) !default
+$space-xxl   : (x: ($space-x-base * 3.375), y: ($space-y-base * 3.375)) !default
+
+$spaces: ('none': $space-none, 'xxs': $space-xxs, 'xs': $space-xs, 'sm': $space-sm, 'ms': $space-ms, 'ba': $space-ba, 'md': $space-md, 'lg': $space-lg, 'xl': $space-xl, 'xxl': $space-xxl) !default
+
+//Shadow variables
+
+$shadow-inner: 0px 0px 1px 1px rgb(16, 17, 20, .12) inset
+$shadow-skeumorphic-primary: 0px 1px 0.4px 0px rgba(136, 136, 138, 0.40) inset, 0px -1px 0.4px 0px rgba(16, 17, 20, 0.40) inset, 0px 4px 10px 0px rgba(16,17,20,0.00), 0px 0px 0px 1px rgb(35,75,169)
+$stroke-skeuomorphic: 1px solid rgba(255, 255, 255, 0.12)
+$shadow-2: 0px 0px 8px 0px rgba(16, 17, 20, 0.12)
+$accent-bg-hover: rgba(203, 42, 61, 0.15)
+$surface-bg-link-hover :rgba(16, 17, 20, .5)
+$border-radius-sm: .75rem
+$border-radius-xs: .5rem

package/src/css/vars/colors.variables.sass

@@ -0,0 +1,127 @@
+// USSSA BLUE
+$blue-1: #E1E9F9 !default
+$blue-2: #CADBF9 !default
+$blue-3: #678BE0 !default
+$blue-4: #4571D9 !default
+$blue-5: #2A5ACB !default
+$blue-6: #234BA9 !default
+$blue-7: #183477 !default
+$blue-8: #143066 !default
+$blue-9: #0D2044 !default
+
+// USSSA GOLD
+$gold-1: #FBF6EE !default
+$gold-2: #EEEAD3 !default
+$gold-3: #DED5AA !default
+$gold-4: #C5B16A !default
+$gold-5: #AC8D46 !default
+$gold-6: #93723B !default
+$gold-7: #775631 !default
+$gold-8: #64482F !default
+$gold-9: #312017 !default
+
+// USSSA GREEN
+$green-1: #EFFAF4 !default
+$green-2: #D9F2E3 !default
+$green-3: #85D0AD !default
+$green-4: #53B48A !default
+$green-5: #248560 !default
+$green-6: #1A6248 !default
+$green-7: #174E3A !default
+$green-8: #144031 !default
+$green-9: #0A241C !default
+
+// USSSA NEUTRAL
+$neutral-1: #FFFFFF !default
+$neutral-2: #F5F7F9 !default
+$neutral-3: #EBEFF3 !default
+$neutral-4: #DCE1E9 !default
+$neutral-5: #CFD5E1 !default
+$neutral-6: #C2CAD9 !default
+$neutral-7: #929CB0 !default
+$neutral-8: #7D89A1 !default
+$neutral-9: #566176 !default
+$neutral-10: #3D4452 !default
+$neutral-11: #2E333D !default
+$neutral-12: #202328 !default
+$neutral-13: #101114 !default
+
+// USSSA ORANGE
+$orange-1: #FEEEEB !default
+$orange-2: #FEE0D7 !default
+$orange-3: #FDBEAA !default
+$orange-4: #FA6C3D !default
+$orange-5: #FE4C10 !default
+$orange-6: #F8430D !default
+$orange-7: #D33809 !default
+$orange-8: #8C3712 !default
+$orange-9: #542007 !default
+
+// USSSA PINK
+$pink-1: #FAE0F4 !default
+$pink-2: #EA99D8 !default
+$pink-3: #E067C6 !default
+$pink-4: #D945B9 !default
+$pink-5: #CB2AA8 !default
+$pink-6: #A9238C !default
+$pink-7: #771862 !default
+$pink-8: #661454 !default
+$pink-9: #440D38 !default
+
+// USSSA PURPLE
+$purple-1: #F0F2FD !default
+$purple-2: #CED3F7 !default
+$purple-3: #B0B6F1 !default
+$purple-4: #7B75DF !default
+$purple-5: #6B5AD1 !default
+$purple-6: #5C4AB8 !default
+$purple-7: #4B3F94 !default
+$purple-8: #403877 !default
+$purple-9: #262145 !default
+
+// USSSA RED
+$red-1: #FEF2F2 !default
+$red-2: #FCCCCE !default
+$red-3: #F9A8AB !default
+$red-4: #E94A50 !default
+$red-5: #CB2A3D !default
+$red-6: #B42126 !default
+$red-7: #951F23 !default
+$red-8: #7C2023 !default
+$red-9: #430C0E !default
+
+// USSSA TEAL
+$teal-1: #CCEDF5 !default
+$teal-2: #99DBEA !default
+$teal-3: #67CAE0 !default
+$teal-4: #45BED9 !default
+$teal-5: #2AAECB !default
+$teal-6: #2390A9 !default
+$teal-7: #186677 !default
+$teal-8: #145766 !default
+$teal-9: #0D3A44 !default
+
+// USSSA YELLOW
+$yellow-1: #FBF4D8 !default
+$yellow-2: #FFF5CC !default
+$yellow-3: #FBE589 !default
+$yellow-4: #FCDE62 !default
+$yellow-5: #F8D547 !default
+$yellow-6: #EBC321 !default
+$yellow-7: #D2AB0C !default
+$yellow-8: #B49104 !default
+$yellow-9: #8C7000 !default
+
+// USSSA RED TRANSPARENT
+$accent-transparent: rgba(203, 42, 61, .20)
+$accent-bg-hover: rgba(203, 42, 61, 0.15)
+
+// USSSA BLUE TRANSPARENT
+$primary-transparent: rgba(35, 75, 169, .20)
+$primary-bg-hover: rgba(35, 75, 169, .15)
+
+//USSSA Description content color
+$description : $neutral-9
+
+$surface-bg-1: #FFFFFF
+$bg-blue-1: #E1E9F9

package/src/utils/data.ts

@@ -0,0 +1,146 @@
+/**
+ * @description Format date
+ * @param {string} date
+ * @returns {string} - Returns Formatted Date
+ */
+
+export const formatDate = (date) => {
+  return (
+    String(date.getDate()).padStart(2, '0') +
+    '/' +
+    (date.getMonth() + 1) +
+    '/' +
+    String(date.getFullYear()).slice(-2)
+  )
+}
+
+/**
+ * @description Return String with Fixed Length
+ * @param {string} string, length
+ * @returns {string} - Returns Return partial String
+ */
+export const fixStringLength = (str, length) => {
+  if (str.length > length) {
+    return str.substring(0, length) + '....'
+  } else {
+    return str.padEnd(length, ' ')
+  }
+}
+
+/**
+ * @description Get File Category from MIME Types
+ * @param {string} str - Mime Type
+ * @returns {string} - Returns Category :- pdf, video, audio, doc etc.
+ **/
+export const getFileCategory = (mimeType) => {
+  const mimeTypes = {
+    // Document MIME types
+    'application/pdf': 'pdf',
+    'application/msword': 'word',
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+      'doc',
+    'text/plain': 'text',
+    'application/vnd.ms-excel': 'excel',
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'doc',
+    'application/vnd.ms-powerpoint': 'doc',
+    'application/vnd.openxmlformats-officedocument.presentationml.presentation':
+      'doc',
+
+    // Image MIME types
+    'image/jpeg': 'image',
+    'image/png': 'image',
+    'image/gif': 'image',
+    'image/bmp': 'image',
+    'image/svg+xml': 'image',
+
+    // Video MIME types
+    'video/mp4': 'video',
+    'video/x-msvideo': 'video',
+    'video/x-matroska': 'video',
+    'video/quicktime': 'video',
+    'video/x-ms-wmv': 'video',
+    'video/avi': 'video',
+
+    // Audio MIME types
+    'audio/mpeg': 'audio',
+    'audio/wav': 'audio',
+    'audio/aac': 'audio',
+    'audio/flac': 'audio',
+
+    // Archive MIME types
+    'application/zip': 'archive',
+    'application/x-rar-compressed': 'archive',
+    'application/x-tar': 'archive',
+    'application/gzip': 'archive',
+
+    // Add more MIME types as needed
+  }
+
+  return mimeTypes[mimeType] || 'Unknown'
+}
+/**
+ * @description Parses intials from a "name" string
+ * @param {string} str - Name string (e.g. "John Hancock", "John", "John Tyler Smith")
+ * @returns {string} - Returns initials
+ **/
+export const parseInitials = (str: string): string | void => {
+  if (!str) return void 0
+  const parts = str.split(' ')
+
+  if (parts.length === 1) return parts[0].substring(0, 2).toUpperCase()
+
+  return `${parts[0].substring(0, 1).toUpperCase()}${parts[1]
+    .substring(0, 1)
+    .toUpperCase()}`
+}
+
+export function categorizeObjects(
+  array: Record<string, any>[],
+  categoryField: string
+): Record<string, any[]> {
+  return array.reduce((acc, item) => {
+    if (!acc[item[categoryField]]) {
+      acc[item[categoryField]] = []
+    }
+    acc[item[categoryField]].push(item)
+    return acc
+  }, {})
+}
+
+export function deepEqual(
+  obj1: Record<string, any>,
+  obj2: Record<string, any>
+) {
+  // Check if both are the same reference
+  if (obj1 === obj2) {
+    return true
+  }
+
+  // Check if either is null or not an object
+  if (
+    obj1 == null ||
+    typeof obj1 !== 'object' ||
+    obj2 == null ||
+    typeof obj2 !== 'object'
+  ) {
+    return false
+  }
+
+  // Get the keys of both objects
+  const keys1 = Object.keys(obj1)
+  const keys2 = Object.keys(obj2)
+
+  // Check if they have the same number of keys
+  if (keys1.length !== keys2.length) {
+    return false
+  }
+
+  // Check if all keys and values are the same
+  for (let key of keys1) {
+    if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {
+      return false
+    }
+  }
+
+  return true
+}