Question

0

326

Vistas

Libro de cuentos: cómo actualizar la configuración regional de i18 dependiendo de las globales

Intento migrar de @storybook/addon-knobs a @storybook/addon-controls y tengo un problema.

Tengo una perilla que uso para actualizar i18n locale .
También cambia de rtl a ltr .
Funciona perfectamente:

 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, }, }, }));

Ahora, cuando trato de usar @storybook/addon-controls , no entiendo cómo hacerlo.

Leí la documentación de Storybook y pude quitar mi perilla para agregar una nueva selección en la barra de herramientas.

 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' }, ], }, }, };

He aquí un ejemplo de una historia:

 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, }

No sé cómo observar este cambio global para actualizar mi i18n y la dirección del idioma.
En el documento, lo global se consume dentro de una historia, pero quiero que sea global.

Cualquier ayuda sería apreciada.

over 4 years ago · Santiago Trujillo

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-03-07T22:16:56.256Z

Estoy más familiarizado con React, pero creo que algo así debería funcionar.

Solución

Escuche context.globals pasado como segundo parámetro al decorador.
Reemplace addDecorator con la matriz de decorators exportada.
Actualice this.storybookLocale a context.globals.storybookLocale .

notas

Los documentos explican cómo usar un decorador para globales aquí .
Encontré este artículo relacionado, pero finalmente no obtuve mucho de él dado que ya tenía la configuración básica. Pasan por algunos pasos adicionales, pero no estoy seguro de que sean necesarios en su caso.

`.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, }, }, }) ];

0

326