refactor: created formatDate utility functions, added tests

Author: Gurgen

packages/v1-components/src/host/__util__/formatDate.ts

@@ -0,0 +1,79 @@
+import { getCurrentInstance, type ComponentInternalInstance } from 'vue'
+import { format } from 'date-fns'
+import { enGB, es, ru } from 'date-fns/locale'
+import { LOCALE } from '@/common/components/date'
+
+type LocaleCode = LOCALE.enGB | LOCALE.es | LOCALE.ru
+
+declare global {
+  interface Window {
+    Vue?: {
+      prototype: {
+        $i18n?: {
+          locale?: string | { value: string }
+        }
+      }
+    }
+  }
+}
+
+const localeMap = {
+  [LOCALE.enGB]: enGB,
+  [LOCALE.ru]: ru,
+  [LOCALE.es]: es,
+} as const
+
+function detectI18nLocale(): LocaleCode | null {
+  try {
+    // Vue 3 detection with type safety
+    const instance = getCurrentInstance() as ComponentInternalInstance
+
+    /* eslint-disable  @typescript-eslint/no-explicit-any */
+    const vue3Locale = (instance?.proxy as any)?.$i18n?.locale
+    if (vue3Locale) return normalizeLocale(vue3Locale)
+
+    // Vue 2 detection with proper window reference
+    if (typeof window !== 'undefined' && window.Vue?.prototype?.$i18n?.locale) {
+      return normalizeLocale(window.Vue.prototype.$i18n.locale)
+    }
+  } catch (e) {
+    console.warn('i18n detection failed:', e)
+  }
+  return null
+}
+function normalizeLocale(locale: string | { value: string }): LocaleCode {
+  const rawLocale = typeof locale === 'object' ? locale.value : locale
+
+  if (rawLocale.startsWith('es')) return LOCALE.es
+  if (rawLocale.startsWith('ru')) return LOCALE.ru
+  return LOCALE.enGB // Default fallback
+}
+export const formatDateLat = (date: Date | string) =>
+  format(date, 'dd/MM/yyyy', {
+    locale: localeMap[LOCALE.enGB],
+  })
+
+export const formatDateRu = (date: Date | string) =>
+  format(date, 'dd.MM.yyyy', {
+    locale: localeMap[LOCALE.ru],
+  })
+export const formatTime = (date: Date | string, localeCode?: LocaleCode) => {
+  const effectiveLocale = localeCode || detectI18nLocale() || LOCALE.enGB
+  return format(date, 'HH:mm', {
+    locale: localeMap[effectiveLocale],
+  })
+}
+
+export const formatDate = (date: Date | string, locale?: LocaleCode) => {
+  const effectiveLocale = locale  || detectI18nLocale() || LOCALE.enGB
+  return effectiveLocale === LOCALE.ru
+    ? formatDateRu(date)
+    : formatDateLat(date)
+}
+
+export const formatDateTime = (date: Date | string, locale?: LocaleCode) => {
+  const effectiveLocale = locale || detectI18nLocale() || LOCALE.enGB
+  return format(date, 'Pp', {
+    locale: localeMap[effectiveLocale],
+  })
+}

packages/v1-components/src/host/components/date/UiDate.vue

@@ -1,75 +1,32 @@
 <template>
-  <span>{{ formattedDate }}</span>
+  <span :class="$attrs.class">
+    {{ formattedDate }}
+  </span>
 </template>
 
 <script lang="ts" setup>
-import { LOCALE, MONTH_FORMAT, WEEK_FORMAT } from '@/common/components/date'
+import { LOCALE } from '@/common/components/date'
+import { formatDate, formatDateTime } from '@/host/__util__/formatDate'
 import { computed, PropType } from 'vue'
-import { format } from 'date-fns'
-import { enGB, es, ru } from 'date-fns/locale'
 
 const props = defineProps({
+  date: {
+    type: [Date, String] as PropType<Date | string>,
+    required: true,
+  },
   locale: {
     type: String as unknown as PropType<LOCALE>,
     default: LOCALE.enGB,
   },
-  weekFormat: {
-    type: String as unknown as PropType<WEEK_FORMAT>,
-    default: WEEK_FORMAT.NONE,
-  },
-  ignoreYear: {
-    type: Boolean,
-    default: false,
-  },
   withTime: {
     type: Boolean,
     default: false,
   },
-  monthFormat: {
-    type: String as unknown as PropType<MONTH_FORMAT>,
-    default: MONTH_FORMAT.DEFAULT,
-  },
-})
-
-const currentLocale = computed(() => {
-  const localeMap = {
-    [LOCALE.enGB]: enGB,
-    [LOCALE.ru]: ru,
-    [LOCALE.es]: es,
-  }
-  return localeMap[props.locale] || enGB
-})
-
-const separator = computed(() => {
-  if (props.monthFormat === MONTH_FORMAT.DEFAULT) {
-    return props.locale === LOCALE.ru ? '.' : '/'
-  }
-  return ' '
 })
 
 const formattedDate = computed(() => {
-  const date = new Date()
-  const options = { locale: currentLocale.value }
-  
-  const day = format(date, 'd', options)
-  const month = format(date, props.monthFormat, options)
-  let result = `${day}${separator.value}${month}`
-  
-  if (!props.ignoreYear) {
-    const year = format(date, 'yyyy', options)
-    result += `${separator.value}${year}`
-  }
-  
-  if (props.weekFormat !== WEEK_FORMAT.NONE) {
-    const week = format(date, props.weekFormat, options)
-    result += `, ${week}`
-  }
-  
-  if (props.withTime) {
-    const time = format(date, 'p', options)
-    result += `, ${time}`
-  }
-  
-  return result
+  return props.withTime ?
+    formatDateTime(props.date, props.locale) :
+    formatDate(props.date, props.locale)
 })
 </script>

packages/v1-components/storybook/stories/UiDate.example.vue

@@ -1,80 +1,9 @@
 <template>
-    <span>{{ formattedDay }}</span>
-    <span>{{ `${defineSeparator+formattedMonth}` }}</span>
-    <span v-if="!ignoreYear">{{ `${!ignoreYear ? defineSeparator : ' '}${formattedYear}` }}</span> 
-    <span v-if="weekFormat">{{ `, ${formattedWeek}` }}</span>
-    <span v-if="withTime">{{ `, ${formattedTime}` }}</span>
-  </template>
+  <div><UiDate date='2024-03-12' /></div>
 
+</template>
+
 <script lang="ts" setup>
-  
-import { LOCALE, MONTH_FORMAT, WEEK_FORMAT } from '@/common/components/date'
-import { computed, PropType } from 'vue'
-import { format } from 'date-fns'
-import { enGB, es, ru } from 'date-fns/locale'
-  
-  
-  
-const props = defineProps({
-  locale: {
-    type: String as unknown as PropType<LOCALE>,
-    default: LOCALE.enGB,
-  },
-  weekFormat: {
-    type: String as unknown as PropType<WEEK_FORMAT>,
-    default: WEEK_FORMAT.NONE,
-  },
-  ignoreYear: {
-    type: Boolean,
-    default: false,
-  },
-  withTime: {
-    type: Boolean,
-    default: false,
-  },
-  monthFormat: {
-    type: String as unknown as PropType<MONTH_FORMAT>,
-    default: MONTH_FORMAT.DEFAULT,
-  },
-})
-  
-  
-  
-  // eslint-disable-next-line vue/return-in-computed-property
-const currentLocale = computed(() => {
-  if (props.locale === LOCALE.enGB) {
-    return enGB
-  } else if (props.locale === LOCALE.ru) {
-    return ru
-  } else if (props.locale === LOCALE.es) {
-    return es
-  }
-})
-  
-const formattedDay = computed(() => format(new Date(), 'd', {
-  locale: currentLocale.value,
-}))
-const formattedMonth = computed(() => format(new Date(), props.monthFormat, {
-  locale: currentLocale.value,
-}))
-const formattedYear = computed(() => format(new Date(), 'yyyy', {
-  locale: currentLocale.value,
-}))
-  
-const formattedWeek = computed(() => format(new Date(), props.weekFormat, {
-  locale: currentLocale.value,
-}))
-  
-const formattedTime = computed(() => format(new Date(), 'p', {
-  locale: currentLocale.value,
-}))
-const defineSeparator = computed(() => {
-  if (props.monthFormat === MONTH_FORMAT.DEFAULT) {
-    if (props.locale == LOCALE.ru) {
-      return '.'
-    } else return '/'
-  } else return ' '
-})
-  
+import UiDate from '@/host/components/date/UiDate.vue'
+
 </script>
-  

packages/v1-components/storybook/stories/UiDate.mdx

@@ -7,38 +7,35 @@ import UiDate from './UiDate.example.vue'
 
 В этой документации описывается работа функций `formatDate()`, `formatDateTime()` и `formatTime()` с различными локализациями в нашем приложении.
 
-## formatDate(value, ignoreYear)
+## formatDate(value)
 
 Функция `formatDate()` форматирует даты в соответствии с текущими настройками локализации. Принимает два параметра:
+
 - `value`: Строка с датой или объект Date
-- `ignoreYear`: Boolean (необязательный) - если true, год будет исключен из вывода
 
 ### Примеры использования
 
 ```javascript
 // Предположим, что дата "2024-01-22"
-const date = new Date('2024-01-22');
+const date = new Date('2024-01-22')
 
 // Для локали ru_RU
-formatDate(date)          // "22.01.24"
-formatDate(date, true)    // "22.01"
+formatDate(date) // "22.01.24"
 
 // Для локали en_GB
-formatDate(date)          // "22/01/24"
-formatDate(date, true)    // "22/01"
+formatDate(date) // "22/01/24"
 
 // Для локали es_ES
-formatDate(date)          // "22/01/24"
-formatDate(date, true)    // "22/01"
+formatDate(date) // "22/01/24"
 ```
 
 ### Шаблоны форматирования по локалям
 
-| Локаль | Стандартный формат | Формат без года |
-|--------|-------------------|-----------------|
-| ru_RU | dd.mm.yy         | dd.mm          |
-| en_GB | dd/mm/yy         | dd/mm          |
-| es_ES | dd/mm/yy         | dd/mm          |
+| Локаль | Стандартный формат |
+| ------ | ------------------ |
+| ru_RU  | dd.mm.yy           |
+| en_GB  | dd/mm/yy           |
+| es_ES  | dd/mm/yy           |
 
 ## formatDateTime(value)
 
@@ -48,44 +45,38 @@ formatDate(date, true)    // "22/01"
 
 ```javascript
 // Предположим, что дата и время "2024-01-22 15:30:00"
-const datetime = new Date('2024-01-22 15:30:00');
+const datetime = new Date('2024-01-22 15:30:00')
 
 // Для локали ru_RU
-formatDateTime(datetime)    // Вернёт "22.01.24 15:30"
+formatDateTime(datetime) // Вернёт "22.01.24 15:30"
 
 // Для локали en_GB
-formatDateTime(datetime)    // Вернёт "22/01/24 15:30"
+formatDateTime(datetime) // Вернёт "22/01/24 15:30"
 
 // Для локали es_ES
-formatDateTime(datetime)    // Вернёт "22/01/24 15:30"
+formatDateTime(datetime) // Вернёт "22/01/24 15:30"
 ```
 
 ## formatTime(value)
 
 Функция `formatTime()` форматирует время в 24-часовом формате (HH:mm). Работает с разными типами входных данных.
 
 ### Параметры
+
 - `value`: может быть строкой, объектом Date, null или undefined
 
 ### Примеры использования
 
 ```javascript
 // С объектом Date
-const date = new Date('2024-01-22 15:30:00');
-formatTime(date)              // Вернёт "15:30"
+const date = new Date('2024-01-22 15:30:00')
+formatTime(date) // Вернёт "15:30"
 
 // Со строкой
-formatTime('2024-01-22 15:30:00')  // Вернёт "15:30"
+formatTime('2024-01-22 15:30:00') // Вернёт "15:30"
 
 // С невалидными значениями
-formatTime(null)              // Вернёт ""
-formatTime(undefined)         // Вернёт ""
+formatTime(null) // Вернёт ""
+formatTime(undefined) // Вернёт ""
 ```
 
-### Примечания
-
-- Время всегда отображается в 24-часовом формате независимо от локали
-- Разделитель даты для ru_Ru - ".", для других локалей - "/"
-- Год всегда отображается в 2-значном формате (yy)
-- Когда `ignoreYear` установлен в true, все локали используют точку (.) в качестве разделителя
-- Функции форматирования времени всегда добавляют ведущие нули для часов и минут