I am in the process of transitioning from @storybook/addon-knobs to @storybook/addon-controls, but I have encountered a problem.
I have a knob that is used to update the i18n locale.
It also switches from rtl to ltr.
This knob works perfectly:
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,
},
},
}));
Now, when trying to use @storybook/addon-controls, I am struggling to understand how to implement it.
I have gone through the Storybook documentation and managed to replace my knob with a new select option in the toolbar.
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' },
],
},
},
};
Here is an example of a story:
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,
}
I am unsure of how to watch for changes in this global variable to update my i18n settings and language direction.
The documentation shows how to consume the global within a story, but I want it to be applied globally.
Any assistance would be greatly appreciated.