From acd767c00a5ae13a66e05d3717518208a40eea95 Mon Sep 17 00:00:00 2001
From: KannoStanfoot <kanno@stanfoot.com>
Date: Fri, 10 May 2024 08:53:12 +0900
Subject: [PATCH 1/5] fix: Localize the duration in sponsor section

---
 .../web/app/components/SponsorPageSection.vue | 22 ++++---
 apps/web/app/lang/en.json                     | 16 +++--
 apps/web/app/lang/ja.json                     | 16 +++--
 packages/ui/.storybook/main.js                |  1 +
 packages/ui/.storybook/preview.js             | 58 +++++++++++++++++
 packages/ui/components/date/Date.stories.ts   | 62 +++++++++++++------
 packages/ui/components/date/Date.vue          | 33 +++++++---
 .../ui/components/date/DatePeriod.stories.ts  | 62 ++++++++++++-------
 packages/ui/components/date/DatePeriod.vue    |  3 +-
 9 files changed, 200 insertions(+), 73 deletions(-)

diff --git a/apps/web/app/components/SponsorPageSection.vue b/apps/web/app/components/SponsorPageSection.vue
index 75f3a7c8..5d53a527 100644
--- a/apps/web/app/components/SponsorPageSection.vue
+++ b/apps/web/app/components/SponsorPageSection.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
 import { useRuntimeConfig } from '#imports'
-import { useI18n } from '#i18n'
 import { useColor, useTypography } from '@vuejs-jp/composable'
 
 const config = useRuntimeConfig()
-const { locale } = useI18n()
 const { fontWeight, fontSize } = useTypography()
 const { color } = useColor()
 </script>
@@ -38,8 +36,16 @@ const { color } = useColor()
           {{ $t('sponsor.apply_period') }}
         </h3>
         <VFDatePeriod
-          :start="{ year: 2024, date: '4.8', dayOfWeek: locale === 'ja' ? $t('day_of_week.monday') : '' }"
-          :end="{ date: '4.25', dayOfWeek: locale === 'ja' ? $t('day_of_week.thursday') : '' }"
+          :start="{
+            prefixYear: $t('sponsor.prefixYear'),
+            date: $t('sponsor.start_date'),
+            dayOfWeek: $t('sponsor.day_of_week.monday'),
+          }"
+          :end="{
+            suffixYear: $t('sponsor.suffixYear'),
+            date: $t('sponsor.end_date'),
+            dayOfWeek: $t('sponsor.day_of_week.thursday'),
+          }"
         />
       </template>
 
@@ -65,13 +71,12 @@ const { color } = useColor()
         </VFLinkButton>
       </div>
     </article>
-
   </div>
 </template>
 
 <style scoped>
-@import url("~/assets/media.css");
-@import url("~/assets/sample.css");
+@import url('~/assets/media.css');
+@import url('~/assets/sample.css');
 
 .sponsor {
   --sponsor-padding: calc(var(--unit) * 5.25) 0;
@@ -92,7 +97,6 @@ const { color } = useColor()
   background-color: white;
   max-width: 960px;
   text-align: center;
-
 }
 
 .sponsor-text {
@@ -107,7 +111,7 @@ const { color } = useColor()
 
   &::v-deep a:hover {
     opacity: 0.4;
-    transition: .2s;
+    transition: 0.2s;
   }
 
   &:deep(p) {
diff --git a/apps/web/app/lang/en.json b/apps/web/app/lang/en.json
index 1f4be24b..f3593970 100644
--- a/apps/web/app/lang/en.json
+++ b/apps/web/app/lang/en.json
@@ -4,11 +4,6 @@
   "about": "about",
   "back_to_top": "Back o Top",
   "not_found": "The page you are looking for cannot be found.",
-  "day_of_week": {
-    "monday": "Mon",
-    "tuesday": "Tue",
-    "thursday": "Thu"
-  },
   "top_page": {
     "latest_information": "Get the latest information on our official social media",
     "date": "Octover 19th, 2024",
@@ -18,7 +13,16 @@
     "title": "Sponsors",
     "apply": "Apply",
     "apply_period": "Sponsor Application Period",
-    "check_doc": "View Sponsorship materials"
+    "check_doc": "View Sponsorship materials",
+    "prefixYear": "",
+    "suffixYear": "2024",
+    "start_date": "April 8",
+    "end_date": "25,",
+    "day_of_week": {
+      "monday": "",
+      "tuesday": "",
+      "thursday": ""
+    }
   },
   "form": {
     "title": "Inquiry",
diff --git a/apps/web/app/lang/ja.json b/apps/web/app/lang/ja.json
index ce7a5429..5fc2584a 100644
--- a/apps/web/app/lang/ja.json
+++ b/apps/web/app/lang/ja.json
@@ -4,11 +4,6 @@
   "about": "このサイトについて",
   "back_to_top": "トップに戻る",
   "not_found": "お探しのページが見つかりません。",
-  "day_of_week": {
-    "monday": "月",
-    "tuesday": "火",
-    "thursday": "木"
-  },
   "top_page": {
     "latest_information": "最新情報は公式SNSでご紹介しています",
     "date": "2024.10.19",
@@ -18,7 +13,16 @@
     "title": "スポンサー",
     "apply": "申し込む",
     "apply_period": "スポンサー申込期間",
-    "check_doc": "資料を見る"
+    "check_doc": "資料を見る",
+    "prefixYear": "2024",
+    "suffixYear": "",
+    "start_date": "4.8",
+    "end_date": "4.25",
+    "day_of_week": {
+      "monday": "月",
+      "tuesday": "火",
+      "thursday": "木"
+    }
   },
   "form": {
     "title": "お問い合わせ",
diff --git a/packages/ui/.storybook/main.js b/packages/ui/.storybook/main.js
index 05ca5dea..72213902 100644
--- a/packages/ui/.storybook/main.js
+++ b/packages/ui/.storybook/main.js
@@ -12,6 +12,7 @@ module.exports = {
     '@storybook/addon-essentials',
     '@storybook/addon-links',
     '@storybook/addon-viewport',
+    '@storybook/addon-toolbars',
   ],
   framework: {
     name: '@storybook/vue3-vite',
diff --git a/packages/ui/.storybook/preview.js b/packages/ui/.storybook/preview.js
index a6a76586..790f8481 100644
--- a/packages/ui/.storybook/preview.js
+++ b/packages/ui/.storybook/preview.js
@@ -1,7 +1,46 @@
+import { setup } from '@storybook/vue3'
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+import { createI18n } from 'vue-i18n'
 
 import './global.css'
 
+const i18n = createI18n({
+  locale: 'ja',
+  fallbackLocale: 'ja',
+  messages: {
+    ja: {
+      sponsor: {
+        prefixYear: '2024',
+        suffixYear: '',
+        start_date: '4.8',
+        end_date: '4.25',
+        day_of_week: {
+          monday: '月',
+          tuesday: '火',
+          thursday: '木',
+        },
+      },
+    },
+    en: {
+      sponsor: {
+        prefixYear: '',
+        suffixYear: '2024',
+        start_date: 'April 8',
+        end_date: '25,',
+        day_of_week: {
+          monday: '',
+          tuesday: '',
+          thursday: '',
+        },
+      },
+    },
+  },
+})
+
+setup((app) => {
+  app.use(i18n)
+})
+
 export const parameters = {
   controls: {
     matchers: {
@@ -14,3 +53,22 @@ export const parameters = {
     defaultViewport: 'responsive',
   },
 }
+
+export const decorators = [
+  (story, context) => {
+    i18n.global.locale = context.globals.locale
+    return { template: '<story />' }
+  },
+]
+
+export const globalTypes = {
+  locale: {
+    name: 'Locale',
+    description: '多言語設定',
+    defaultValue: 'ja',
+    toolbar: {
+      icon: 'globe',
+      items: ['ja', 'en'],
+    },
+  },
+}
diff --git a/packages/ui/components/date/Date.stories.ts b/packages/ui/components/date/Date.stories.ts
index 032fbd3b..8dafc9c6 100644
--- a/packages/ui/components/date/Date.stories.ts
+++ b/packages/ui/components/date/Date.stories.ts
@@ -1,16 +1,19 @@
-import { StoryFn } from '@storybook/vue3'
+import { Meta, StoryObj } from '@storybook/vue3'
 import Date from './Date.vue'
 
-export default {
+const meta: Meta<typeof Date> = {
   title: 'date/Date',
+  tags: ['autodocs'],
   component: Date,
-  args: {
-    date: '4.1',
-    dayOfWeek: '月',
-  },
   argTypes: {
-    year: {
-      description: 'The year property',
+    prefixYear: {
+      description: 'The prefixYear property',
+      control: {
+        type: 'text',
+      },
+    },
+    suffixYear: {
+      description: 'The suffixYear property',
       control: {
         type: 'text',
       },
@@ -30,18 +33,37 @@ export default {
   },
 }
 
-const Template: StoryFn<unknown> = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Date },
-  setup() {
-    return { args }
-  },
-  template: '<Date v-bind="args" />',
-})
+export default meta
+
+type Story = StoryObj<typeof Date>
 
-export const Default = Template.bind({})
+/**
+ * Controlでpropsを切り替えると、日付と曜日表記が変わる
+ */
+export const PropsControls: Story = {
+  name: 'propsControls',
+  args: {
+    prefixYear: '2024',
+    suffixYear: '',
+    date: '5.8',
+    dayOfWeek: '月',
+  },
+  render: (args) => ({
+    components: { Date },
+    setup() {
+      return { args }
+    },
+    template: '<Date :="args" />',
+  })
+}
 
-export const WithYear = Template.bind({})
-WithYear.args = {
-  year: 2024,
+/**
+ * ツールバーで言語を切り替えると、日付と曜日表記が変わる
+ */
+export const I18n: Story = {
+  name: 'i18n',
+  render: () => ({
+    components: { Date },
+    template:  '<Date :prefix-year="$t(`sponsor.prefixYear`)" :suffix-year="$t(`sponsor.suffixYear`)" :date="$t(`sponsor.start_date`)" :dayOfWeek="$t(`sponsor.day_of_week.monday`)" />'
+  })
 }
diff --git a/packages/ui/components/date/Date.vue b/packages/ui/components/date/Date.vue
index dfa87419..a455a3c7 100644
--- a/packages/ui/components/date/Date.vue
+++ b/packages/ui/components/date/Date.vue
@@ -2,13 +2,13 @@
 import { useColor, useTypography } from '@vuejs-jp/composable'
 
 export type DateProps = {
-  year?: number
+  prefixYear?: string
+  suffixYear?: string
   date: string
   dayOfWeek?: string
 }
 
-// eslint-disable-next-line no-unused-vars
-const props = defineProps<DateProps>()
+defineProps<DateProps>()
 
 const { fontWeight, fontSize } = useTypography()
 const { color } = useColor()
@@ -16,16 +16,16 @@ const { color } = useColor()
 
 <template>
   <div class="datewrapper">
-    <!-- year -->
+    <!-- prefix year -->
     <span
-      v-if="year"
+      v-if="prefixYear"
       :style="{
         fontSize: fontSize('heading/300'),
         color: color('vue-blue'),
       }"
-      class="year"
+      class="year prefix-year"
     >
-      {{ year }}
+      {{ prefixYear }}
     </span>
     <!-- date -->
     <span
@@ -50,6 +50,17 @@ const { color } = useColor()
     >
       {{ dayOfWeek }}
     </span>
+    <!-- suffix year -->
+    <span
+      v-if="suffixYear"
+      :style="{
+        fontSize: fontSize('heading/300'),
+        color: color('vue-blue'),
+      }"
+      class="year suffix-year"
+    >
+      {{ suffixYear }}
+    </span>
   </div>
 </template>
 
@@ -61,9 +72,14 @@ const { color } = useColor()
 
 .year {
   display: inline-block;
-  margin-right: 6px;
   font-size: 24px;
 }
+.prefix-year {
+  margin-right: 6px;
+}
+.suffix-year {
+  margin-left: 6px;
+}
 
 .date {
   display: inline-block;
@@ -80,6 +96,5 @@ const { color } = useColor()
   height: 20px;
   border-radius: 2px;
   margin-left: 4px;
-
 }
 </style>
diff --git a/packages/ui/components/date/DatePeriod.stories.ts b/packages/ui/components/date/DatePeriod.stories.ts
index b6005da7..6b102389 100644
--- a/packages/ui/components/date/DatePeriod.stories.ts
+++ b/packages/ui/components/date/DatePeriod.stories.ts
@@ -1,20 +1,10 @@
-import { StoryFn } from '@storybook/vue3'
+import { Meta, StoryObj } from '@storybook/vue3'
 import DatePeriod from './DatePeriod.vue'
 
-export default {
+const meta: Meta<typeof DatePeriod> = {
   title: 'date/DatePeriod',
+  tags: ['autodocs'],
   component: DatePeriod,
-  args: {
-    start: {
-      year: 2024,
-      date: '4.1',
-      dayOfWeek: '月',
-    },
-    end: {
-      date: '4.30',
-      dayOfWeek: '火',
-    },
-  },
   argTypes: {
     start: {
       description: 'The start property',
@@ -31,13 +21,43 @@ export default {
   },
 }
 
-const Template: StoryFn<unknown> = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { DatePeriod },
-  setup() {
-    return { args }
+export default meta
+
+type Story = StoryObj<typeof Date>
+
+
+/**
+ * Controlでpropsを切り替えると、日付と曜日表記が変わる
+ */
+export const PropsControls: Story = {
+  name: 'propsControls',
+  args: {
+    start: {
+      prefixYear: '2024',
+      date: '4.1',
+      dayOfWeek: '月',
+    },
+    end: {
+      date: '4.30',
+      dayOfWeek: '火',
+    },
   },
-  template: '<DatePeriod v-bind="args" />',
-})
+  render: (args) => ({
+    components: { DatePeriod },
+    setup() {
+      return { args }
+    },
+    template: '<DatePeriod :="args" />',
+  })
+}
 
-export const Default = Template.bind({})
+/**
+ * ツールバーで言語を切り替えると、日付と曜日表記が変わる
+ */
+export const I18n: Story = {
+  name: 'i18n',
+  render: () => ({
+    components: { DatePeriod },
+    template: '<DatePeriod :start="{prefixYear:$t(`sponsor.prefixYear`),date:$t(`sponsor.start_date`),dayOfWeek:$t(`sponsor.day_of_week.monday`)}" :end="{suffixYear:$t(`sponsor.suffixYear`),date:$t(`sponsor.end_date`),dayOfWeek:$t(`sponsor.day_of_week.tuesday`)}" />'
+  })
+}
diff --git a/packages/ui/components/date/DatePeriod.vue b/packages/ui/components/date/DatePeriod.vue
index 50b9bbc6..91d311c8 100644
--- a/packages/ui/components/date/DatePeriod.vue
+++ b/packages/ui/components/date/DatePeriod.vue
@@ -8,8 +8,7 @@ type DatePeriodProps = {
   end: DateProps
 }
 
-// eslint-disable-next-line no-unused-vars
-const props = defineProps<DatePeriodProps>()
+defineProps<DatePeriodProps>()
 
 const { fontSize } = useTypography()
 const { color } = useColor()

From 4d2a34eac3ad40ccc7ae2a270a4a38df5fd5f644 Mon Sep 17 00:00:00 2001
From: KannoStanfoot <kanno@stanfoot.com>
Date: Fri, 10 May 2024 09:21:35 +0900
Subject: [PATCH 2/5] chore: fix chromatic action

---
 .github/workflows/chromatic.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
index 7866f685..dce0fbc6 100644
--- a/.github/workflows/chromatic.yml
+++ b/.github/workflows/chromatic.yml
@@ -33,6 +33,7 @@ jobs:
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           workingDir: ./packages/ui
+          storybookBaseDir: ./packages/ui
           exitZeroOnChanges: true
           exitOnceUploaded: true
           onlyChanged: true

From 2ccd077c4adb178a2220ecc1e8d5d5bf06694697 Mon Sep 17 00:00:00 2001
From: KannoStanfoot <kanno@stanfoot.com>
Date: Sat, 11 May 2024 04:17:56 +0900
Subject: [PATCH 3/5] fix: remove unused CSS import statement

---
 apps/web/app/components/SponsorPageSection.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/web/app/components/SponsorPageSection.vue b/apps/web/app/components/SponsorPageSection.vue
index 5d53a527..c7a31bb0 100644
--- a/apps/web/app/components/SponsorPageSection.vue
+++ b/apps/web/app/components/SponsorPageSection.vue
@@ -76,7 +76,6 @@ const { color } = useColor()
 
 <style scoped>
 @import url('~/assets/media.css');
-@import url('~/assets/sample.css');
 
 .sponsor {
   --sponsor-padding: calc(var(--unit) * 5.25) 0;

From 426ef4dc72edafc3dce3ec7b6060706e2f7b8c98 Mon Sep 17 00:00:00 2001
From: KannoStanfoot <kanno@stanfoot.com>
Date: Sun, 12 May 2024 01:08:41 +0900
Subject: [PATCH 4/5] refactor: organize resources for i18n support

---
 .../web/app/components/SponsorPageSection.vue | 38 +++++++++++++------
 apps/web/app/lang/en.json                     | 15 +++-----
 apps/web/app/lang/ja.json                     | 20 +++++-----
 packages/ui/.storybook/preview.js             | 38 +++++++++----------
 packages/ui/components/date/Date.stories.ts   |  2 +-
 .../ui/components/date/DatePeriod.stories.ts  |  2 +-
 6 files changed, 61 insertions(+), 54 deletions(-)

diff --git a/apps/web/app/components/SponsorPageSection.vue b/apps/web/app/components/SponsorPageSection.vue
index c7a31bb0..84bf86b5 100644
--- a/apps/web/app/components/SponsorPageSection.vue
+++ b/apps/web/app/components/SponsorPageSection.vue
@@ -1,10 +1,35 @@
 <script setup lang="ts">
+import { useI18n } from '#i18n'
 import { useRuntimeConfig } from '#imports'
 import { useColor, useTypography } from '@vuejs-jp/composable'
+import { useLocaleCurrent } from '@/composables/useLocaleCurrent'
 
 const config = useRuntimeConfig()
 const { fontWeight, fontSize } = useTypography()
 const { color } = useColor()
+
+const { t, te } = useI18n()
+const { locale } = useLocaleCurrent()
+/**
+ * Get translation or return empty string
+ * @param key - translation key
+ * @returns translation or empty string
+ */
+function getTranslationOrDefault(key: string): string {
+  return te(key, locale.value) ? t(key) : ''
+}
+
+const periodStart = {
+  prefixYear: t('prefix_year'),
+  date: t('start_date'),
+  dayOfWeek: getTranslationOrDefault('day_of_week.monday'),
+}
+
+const periodEnd = {
+  suffixYear: t('suffix_year'),
+  date: t('end_date'),
+  dayOfWeek: getTranslationOrDefault('day_of_week.thursday'),
+}
 </script>
 
 <template>
@@ -35,18 +60,7 @@ const { color } = useColor()
         >
           {{ $t('sponsor.apply_period') }}
         </h3>
-        <VFDatePeriod
-          :start="{
-            prefixYear: $t('sponsor.prefixYear'),
-            date: $t('sponsor.start_date'),
-            dayOfWeek: $t('sponsor.day_of_week.monday'),
-          }"
-          :end="{
-            suffixYear: $t('sponsor.suffixYear'),
-            date: $t('sponsor.end_date'),
-            dayOfWeek: $t('sponsor.day_of_week.thursday'),
-          }"
-        />
+        <VFDatePeriod :start="periodStart" :end="periodEnd" />
       </template>
 
       <div class="sponsor-buttons">
diff --git a/apps/web/app/lang/en.json b/apps/web/app/lang/en.json
index f3593970..89d85048 100644
--- a/apps/web/app/lang/en.json
+++ b/apps/web/app/lang/en.json
@@ -4,6 +4,10 @@
   "about": "about",
   "back_to_top": "Back o Top",
   "not_found": "The page you are looking for cannot be found.",
+  "prefix_year": "",
+  "suffix_year": "2024",
+  "start_date": "April 8",
+  "end_date": "25,",
   "top_page": {
     "latest_information": "Get the latest information on our official social media",
     "date": "Octover 19th, 2024",
@@ -13,16 +17,7 @@
     "title": "Sponsors",
     "apply": "Apply",
     "apply_period": "Sponsor Application Period",
-    "check_doc": "View Sponsorship materials",
-    "prefixYear": "",
-    "suffixYear": "2024",
-    "start_date": "April 8",
-    "end_date": "25,",
-    "day_of_week": {
-      "monday": "",
-      "tuesday": "",
-      "thursday": ""
-    }
+    "check_doc": "View Sponsorship materials"
   },
   "form": {
     "title": "Inquiry",
diff --git a/apps/web/app/lang/ja.json b/apps/web/app/lang/ja.json
index 5fc2584a..cb4e703b 100644
--- a/apps/web/app/lang/ja.json
+++ b/apps/web/app/lang/ja.json
@@ -4,6 +4,15 @@
   "about": "このサイトについて",
   "back_to_top": "トップに戻る",
   "not_found": "お探しのページが見つかりません。",
+  "prefix_year": "2024",
+  "suffix_year": "",
+  "start_date": "4.8",
+  "end_date": "4.25",
+  "day_of_week": {
+    "monday": "月",
+    "tuesday": "火",
+    "thursday": "木"
+  },
   "top_page": {
     "latest_information": "最新情報は公式SNSでご紹介しています",
     "date": "2024.10.19",
@@ -13,16 +22,7 @@
     "title": "スポンサー",
     "apply": "申し込む",
     "apply_period": "スポンサー申込期間",
-    "check_doc": "資料を見る",
-    "prefixYear": "2024",
-    "suffixYear": "",
-    "start_date": "4.8",
-    "end_date": "4.25",
-    "day_of_week": {
-      "monday": "月",
-      "tuesday": "火",
-      "thursday": "木"
-    }
+    "check_doc": "資料を見る"
   },
   "form": {
     "title": "お問い合わせ",
diff --git a/packages/ui/.storybook/preview.js b/packages/ui/.storybook/preview.js
index 790f8481..178c700b 100644
--- a/packages/ui/.storybook/preview.js
+++ b/packages/ui/.storybook/preview.js
@@ -9,30 +9,28 @@ const i18n = createI18n({
   fallbackLocale: 'ja',
   messages: {
     ja: {
-      sponsor: {
-        prefixYear: '2024',
-        suffixYear: '',
-        start_date: '4.8',
-        end_date: '4.25',
-        day_of_week: {
-          monday: '月',
-          tuesday: '火',
-          thursday: '木',
-        },
+      prefix_year: '2024',
+      suffix_year: '',
+      start_date: '4.8',
+      end_date: '4.25',
+      day_of_week: {
+        monday: '月',
+        tuesday: '火',
+        thursday: '木',
       },
     },
     en: {
-      sponsor: {
-        prefixYear: '',
-        suffixYear: '2024',
-        start_date: 'April 8',
-        end_date: '25,',
-        day_of_week: {
-          monday: '',
-          tuesday: '',
-          thursday: '',
-        },
+      prefix_year: '',
+      suffix_year: '2024',
+      start_date: 'April 8',
+      end_date: '25,',
+      // dummy
+      day_of_week: {
+        monday: '',
+        tuesday: '',
+        thursday: '',
       },
+      // end dummy
     },
   },
 })
diff --git a/packages/ui/components/date/Date.stories.ts b/packages/ui/components/date/Date.stories.ts
index 8dafc9c6..fa4cf0ad 100644
--- a/packages/ui/components/date/Date.stories.ts
+++ b/packages/ui/components/date/Date.stories.ts
@@ -64,6 +64,6 @@ export const I18n: Story = {
   name: 'i18n',
   render: () => ({
     components: { Date },
-    template:  '<Date :prefix-year="$t(`sponsor.prefixYear`)" :suffix-year="$t(`sponsor.suffixYear`)" :date="$t(`sponsor.start_date`)" :dayOfWeek="$t(`sponsor.day_of_week.monday`)" />'
+    template:  '<Date :prefix-year="$t(`prefix_year`)" :suffix-year="$t(`suffix_year`)" :date="$t(`start_date`)" :dayOfWeek="$t(`day_of_week.monday`),``" />'
   })
 }
diff --git a/packages/ui/components/date/DatePeriod.stories.ts b/packages/ui/components/date/DatePeriod.stories.ts
index 6b102389..f44881a0 100644
--- a/packages/ui/components/date/DatePeriod.stories.ts
+++ b/packages/ui/components/date/DatePeriod.stories.ts
@@ -58,6 +58,6 @@ export const I18n: Story = {
   name: 'i18n',
   render: () => ({
     components: { DatePeriod },
-    template: '<DatePeriod :start="{prefixYear:$t(`sponsor.prefixYear`),date:$t(`sponsor.start_date`),dayOfWeek:$t(`sponsor.day_of_week.monday`)}" :end="{suffixYear:$t(`sponsor.suffixYear`),date:$t(`sponsor.end_date`),dayOfWeek:$t(`sponsor.day_of_week.tuesday`)}" />'
+    template: '<DatePeriod :start="{prefixYear:$t(`prefix_year`),date:$t(`start_date`),dayOfWeek:$t(`day_of_week.monday`)}" :end="{suffixYear:$t(`suffix_year`),date:$t(`end_date`),dayOfWeek:$t(`day_of_week.tuesday`)}" />'
   })
 }

From 691c3d3a734e7662954f4a259512d14ee510792b Mon Sep 17 00:00:00 2001
From: KannoStanfoot <kanno@stanfoot.com>
Date: Sun, 12 May 2024 01:29:38 +0900
Subject: [PATCH 5/5] fix: fix Date story build error

---
 packages/ui/components/date/Date.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/components/date/Date.stories.ts b/packages/ui/components/date/Date.stories.ts
index fa4cf0ad..d5762b58 100644
--- a/packages/ui/components/date/Date.stories.ts
+++ b/packages/ui/components/date/Date.stories.ts
@@ -64,6 +64,6 @@ export const I18n: Story = {
   name: 'i18n',
   render: () => ({
     components: { Date },
-    template:  '<Date :prefix-year="$t(`prefix_year`)" :suffix-year="$t(`suffix_year`)" :date="$t(`start_date`)" :dayOfWeek="$t(`day_of_week.monday`),``" />'
+    template:  '<Date :prefix-year="$t(`prefix_year`)" :suffix-year="$t(`suffix_year`)" :date="$t(`start_date`)" :dayOfWeek="$t(`day_of_week.monday`)" />'
   })
 }