故事书：如何根据全局变量更新 i18 语言环境

Posted 2023-02-19

【中文标题】故事书：如何根据全局变量更新 i18 语言环境

【英文标题】：Storybook: how to update i18 locale depending on globals

【发布时间】：2021-09-19 16:04:46

【问题描述】：

我尝试从 @storybook/addon-knobs 迁移到 @storybook/addon-controls，但遇到了问题。

我有一个用于更新 i18n 语言环境的旋钮。 它还从 rtl 切换到 ltr。 它完美无瑕：

import  select  from '@storybook/addon-knobs'
import Vue from "vue";

// import vue plugins
import VueI18n from "vue-i18n";

// import language file
const message = require("./translations.json");

// i18n and store
Vue.use(VueI18n);

import store from "../src/store";
addDecorator(() => (
  template: "<story/>",
  i18n: new VueI18n(
    defaultLocale: 'en',
    locale: 'en',
    locales: [ 'en', 'ar' ],
    messages: 
      en: message.en,
      ar: message.ar,
    ,
  ),
  // add a props to toggle language
  props: 
    storybookLocale: 
      type: String,
      default: select('I18n locale', ['en', 'ar'], 'en'),
    ,
  ,
  watch: 
    // add a watcher to toggle language
    storybookLocale: 
      handler() 
        this.$i18n.locale = this.storybookLocale;
        let dir = this.storybookLocale === 'ar' ? 'rtl' : 'ltr';
        document.querySelector('html').setAttribute('dir', dir);
      ,
      immediate: true,
    ,
  ,
));

现在，当我尝试使用@storybook/addon-controls 时，我不明白该怎么做。

我已阅读Storybook documentation 并且能够移除我的旋钮以在工具栏中添加新选择。

export const globalTypes = 
  storybookLocale: 
    name: 'storybookLocale',
    description: 'Internationalization locale',
    defaultValue: 'en',
    toolbar: 
      icon: 'globe',
      items: [
         value: 'en', right: '????????', title: 'English' ,
         value: 'ar', right: '????????', title: 'Arabic' ,
      ],
    ,
  ,
;

这是一个故事的例子：

import SectionTitle from '../src/components/onboarding/section-title.vue'

export default 
  title: 'Onboarding/Components/Title',
  component: SectionTitle,
;

const Template = (args,  argTypes ) => (
  props: Object.keys(argTypes),
  components:  SectionTitle ,
  template: '<SectionTitle v-bind="$props" />',
);

export const Title:any = Template.bind();
Title.args = 
  stepNumber: 1,

我不知道如何观察这种全球变化来更新我的 i18n 和语言方向。 在文档中，全局在故事中使用，但我希望它是全局的。

任何帮助将不胜感激。

【问题讨论】：

"<story/>" 来自哪里——story 不应该是传递给addDecorator 的回调中的参数吗？

<story /> 工作正常，我不是一开始就设置项目的人，这不是我改变的东西。也许它应该是一个参数。

你能分享一个例子吗？

【参考方案1】：

我更熟悉 React，但我认为这些方面的东西应该可以工作。

解决方案

监听context.globals 作为第二个参数传递给装饰器。 将addDecorator 替换为导出的decorators 数组。 将this.storybookLocale 更新为 context.globals.storybookLocale。

笔记

文档解释了如何为全局变量 here 使用装饰器。 我找到了这个相关的article，但最终并没有从中受益，因为您已经进行了基本设置。他们确实会执行一些额外的步骤，但我不确定它们对您的情况是否必要。

.storybook/preview.js

import Vue from "vue";
import VueI18n from "vue-i18n";
import store from "../src/store";
import message from "./translations.json";

Vue.use(VueI18n);

export const globalTypes = 
  storybookLocale: 
    name: 'storybookLocale',
    description: 'Internationalization locale',
    defaultValue: 'en',
    toolbar: 
      icon: 'globe',
      items: [
         value: 'en', right: '??', title: 'English' ,
         value: 'ar', right: '??', title: 'Arabic' ,
      ],
    ,
  ,
;

export const decorators = [
  (story, context) => (
    template: "<story/>",
    i18n: new VueI18n(
      defaultLocale: 'en',
      locale: 'en',
      locales: [ 'en', 'ar' ],
      messages: 
        en: message.en,
        ar: message.ar,
      ,
    ),
    props: 
      storybookLocale: 
        type: String,
        default: 'en',
      ,
    ,
    watch: 
      storybookLocale: 
        handler() 
          this.$i18n.locale = context.globals.storybookLocale;
          let dir = storybookLocale === 'ar' ? 'rtl' : 'ltr';
          document.querySelector('html').setAttribute('dir', dir);
        ,
        immediate: true,
      ,
    ,
  )
];

【讨论】：

您好，感谢您的回答。似乎观察者仅在加载时触发，之后它永远不会触发。 （我有一个控制台登录 handler()，它只显示一次。

我想看一个示例故事 - 之前对这个问题发表了评论。

已添加，抱歉我错过了评论。 @JBallin