feat: add i18n basic support to storybook #137

.storybook/main.ts

@@ -4,7 +4,7 @@ const config: StorybookConfig = {
   stories: [
     '../stories/**/*.mdx',
     '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
-    '../components/Fields/Stars.stories.@(js|jsx|mjs|ts|tsx)',
+    '../components/Fields/DateRange.stories.@(js|jsx|mjs|ts|tsx)',
   ],
   addons: [
     '@storybook/addon-links',

.storybook/preview.ts

@@ -3,13 +3,32 @@ import type { Preview } from '@storybook/vue3'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faStar as fasStar } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { createI18n } from 'vue-i18n'
+import messages from '../locales'
+
+// i18n set up
+const i18n = createI18n({
+  langDir: 'locales',
+  messages,
+  legacy: false,
+  locale: 'en',
+})
 
 setup((app) => {
   library.add(fasStar)
+  app.use(i18n)
   app.component('font-awesome-icon', FontAwesomeIcon)
 })
 
 const preview: Preview = {
+  globals: {
+    locale: 'en_GB',
+    locales: {
+      en_GB: { title: 'English', right: 'GB' },
+      fr_FR: { title: 'Français', right: 'FR' },
+      es_ES: { title: 'Spanish', right: 'ES' },
+    },
+  },
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {

components/Fields/DateRange.stories.ts

@@ -1,31 +1,35 @@
-import DateRange from '~/components/Fields/DateRange.vue'
-import { bind } from '~/lib/storybook-types'
+import type { Meta, StoryObj } from '@storybook/vue3'
+import DateRange from './DateRange.vue'
 
-export default {
-  title: 'Fields/DateRange',
+const meta: Meta<typeof DateRange> = {
   component: DateRange,
 }
 
-const defaultProps = {
-  start: '01/01/01',
-  end: '02/02/02',
-}
+export default meta
+type Story = StoryObj<typeof DateRange>
 
-export const Default = bind(DateRange, {
-  ...defaultProps,
-})
+export const Default: Story = {
+  args: {
+    start: '01/01/01',
+    end: '02/02/02',
+  },
+}
 
-export const DefaultStart = bind(DateRange, {
-  ...defaultProps,
-  end: undefined,
-})
+export const SameDay: Story = {
+  args: {
+    start: '01/01/01',
+    end: '01/01/01',
+  },
+}
 
-export const DefaultEnd = bind(DateRange, {
-  ...defaultProps,
-  start: undefined,
-})
+export const From: Story = {
+  args: {
+    start: '01/01/01',
+  },
+}
 
-export const DefaultSame = bind(DateRange, {
-  ...defaultProps,
-  end: defaultProps.start,
-})
+export const Until: Story = {
+  args: {
+    end: '01/01/01',
+  },
+}

components/Fields/DateRange.vue

@@ -1,26 +1,8 @@
-<script lang="ts">
-import type { PropType } from 'vue'
-
-import { defineNuxtComponent } from '#app'
-
-export function isDateRangeEmpty(properties: {
-  [key: string]: string
-}): boolean {
-  return !('start' in properties) && !('end' in properties)
-}
-
-export default defineNuxtComponent({
-  props: {
-    start: {
-      type: String as PropType<string>,
-      default: null,
-    },
-    end: {
-      type: String as PropType<string>,
-      default: null,
-    },
-  },
-})
+<script setup lang="ts">
+defineProps<{
+  start?: string
+  end?: string
+}>()
 </script>
 
 <template>

components/Fields/Field.vue

@@ -6,7 +6,7 @@ import type { PropType } from 'vue'
 import { defineNuxtComponent } from '#app'
 import AddressField, { isAddressFieldEmpty } from '~/components/Fields/AddressField.vue'
 import Coordinates, { isCoordinatesEmpty } from '~/components/Fields/Coordinates.vue'
-import DateRange, { isDateRangeEmpty } from '~/components/Fields/DateRange.vue'
+import DateRange from '~/components/Fields/DateRange.vue'
 import Facebook from '~/components/Fields/Facebook.vue'
 import Instagram from '~/components/Fields/Instagram.vue'
 import OpeningHours, { isOpeningHoursSupportedOsmTags } from '~/components/Fields/OpeningHours.vue'
@@ -28,11 +28,11 @@ export function isFiledEmpty(
   else if (field.field === 'addr')
     return isAddressFieldEmpty(properties)
   else if (field.field === 'start_end_date')
-    return isDateRangeEmpty(properties)
+    return !('start' in properties) && !('end' in properties)
+
   else if (field.field === 'coordinates')
     return isCoordinatesEmpty(geom)
-  else
-    return !(field.field in properties)
+  else return !(field.field in properties)
 }
 
 export default defineNuxtComponent({