refactor(stage-ui): re-structure for Histoire

cspell.config.yaml

@@ -187,6 +187,7 @@ words:
   - sizecheck
   - smallserial
   - Sniglet
+  - sonner
   - specta
   - ssml
   - staticlib

packages/stage-ui/package.json

@@ -100,6 +100,7 @@
     "vaul-vue": "^0.4.1",
     "vue-i18n": "^11.1.9",
     "vue-router": "^4.5.1",
+    "vue-sonner": "^2.0.1",
     "vue-tsc": "^2.2.12",
     "wlipsync": "^1.2.1",
     "xast-util-to-xml": "^4.0.0",

packages/stage-ui/src/components/Menu/CharacterCard.story.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-import CharacterCardColorControls from '../../../stories/CharacterCardColorControls.vue'
 import CharacterCard from './CharacterCard.vue'
 import characterImage from './relu.png'
 

packages/stage-ui/src/components/Widgets/Dialogs/Onboarding/MobileOnboarding.vue

@@ -6,7 +6,7 @@ import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import onboardingLogo from '../../../assets/onboarding.png'
+import onboardingLogo from '../../../../assets/onboarding.png'
 
 import { Callout } from '../../../Layouts'
 import { RadioCardDetail } from '../../../Menu'

packages/stage-ui/src/components/Widgets/Dialogs/Onboarding/Onboarding.vue

@@ -6,7 +6,7 @@ import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import onboardingLogo from '../../../assets/onboarding.png'
+import onboardingLogo from '../../../../assets/onboarding.png'
 
 import { RadioCardDetail } from '../../../Menu'
 import { Button } from '../../../Misc'

packages/stage-ui/stories/modules/i18n.ts

@@ -0,0 +1,34 @@
+import messages from '@proj-airi/i18n/locales'
+
+import { createI18n } from 'vue-i18n'
+
+const languageRemap: Record<string, string> = {
+  'zh-CN': 'zh-Hans',
+  'zh-TW': 'zh-Hans', // TODO: remove this when zh-Hant is supported
+  'zh-HK': 'zh-Hans', // TODO: remove this when zh-Hant is supported
+  'zh-Hant': 'zh-Hans', // TODO: remove this when zh-Hant is supported
+  'en-US': 'en',
+  'en-GB': 'en',
+  'en-AU': 'en',
+  'en': 'en',
+}
+
+function getLocale() {
+  let language = localStorage.getItem('settings/language')
+  const languages = Object.keys(messages!)
+
+  if (languageRemap[language || 'en'] != null) {
+    language = languageRemap[language || 'en']
+  }
+  if (language && languages.includes(language))
+    return language
+
+  return 'en'
+}
+
+export const i18n = createI18n({
+  legacy: false,
+  locale: getLocale(),
+  fallbackLocale: 'en',
+  messages,
+})

packages/stage-ui/stories/setup.ts

@@ -4,18 +4,23 @@ import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
 import { defineSetupVue3 } from '@histoire/plugin-vue'
 import { MotionPlugin } from '@vueuse/motion'
 
-import ThemeColorsHueControl from './ThemeColorsHueControl.vue'
+import CharacterCardColorControls from './components/CharacterCardColorControls.vue'
+import ThemeColorsHueControl from './components/ThemeColorsHueControl.vue'
+
+import { i18n } from './modules/i18n'
 
 import 'uno.css'
 import '@unocss/reset/tailwind.css'
-import './main.css'
+import './styles/main.css'
 import '@proj-airi/font-cjkfonts-allseto/index.css'
 import '@proj-airi/font-xiaolai/index.css'
 
 export const setupVue3 = defineSetupVue3(({ app }) => {
   app.use(MotionPlugin)
+  app.use(i18n)
   // TODO: Fix autoAnimatePlugin type error
   app.use(autoAnimatePlugin as unknown as Plugin)
 
   app.component('ThemeColorsHueControl', ThemeColorsHueControl)
+  app.component('CharacterCardColorControls', CharacterCardColorControls)
 })

pnpm-lock.yaml

@@ -751,6 +751,9 @@ importers:
       vue-router:
         specifier: ^4.5.1
         version: 4.5.1(vue@3.5.17(typescript@5.8.3))
+      vue-sonner:
+        specifier: ^2.0.1
+        version: 2.0.1
       xsschema:
         specifier: 'catalog:'
         version: 0.3.0-beta.8(@valibot/to-json-schema@1.0.0-rc.0(valibot@1.0.0-beta.9(typescript@5.8.3)))(zod-to-json-schema@3.24.6(zod@3.25.74))(zod@3.25.74)
@@ -1180,6 +1183,9 @@ importers:
       vue-router:
         specifier: ^4.5.1
         version: 4.5.1(vue@3.5.17(typescript@5.8.3))
+      vue-sonner:
+        specifier: ^2.0.1
+        version: 2.0.1
       vue-tsc:
         specifier: ^2.2.12
         version: 2.2.12(typescript@5.8.3)
@@ -11838,6 +11844,9 @@ packages:
     peerDependencies:
       vue: ^3.2.0
 
+  vue-sonner@2.0.1:
+    resolution: {integrity: sha512-sn4vjCRzRcnMaxaLa9aNSyZQi6S+gshiea5Lc3eqpkj0ES9LH8ljg+WJCkxefr28V4PZ9xkUXBIWpxGfQxstIg==}
+
   vue-tsc@2.2.12:
     resolution: {integrity: sha512-P7OP77b2h/Pmk+lZdJ0YWs+5tJ6J2+uOQPo7tlBnY44QqQSPYvS0qVT4wqDJgwrZaLe47etJLLQRFia71GYITw==}
     hasBin: true
@@ -24949,6 +24958,8 @@ snapshots:
       '@vue/devtools-api': 6.6.4
       vue: 3.5.17(typescript@5.8.3)
 
+  vue-sonner@2.0.1: {}
+
   vue-tsc@2.2.12(typescript@5.8.3):
     dependencies:
       '@volar/typescript': 2.4.15