diff --git a/.storybook/preview.js b/.storybook/preview.js new file mode 100644 index 0000000..cb309f6 --- /dev/null +++ b/.storybook/preview.js @@ -0,0 +1,12 @@ +export const parameters = { + locale: 'en', + locales: { + en: {title: 'English', right: '🇺🇸'}, + gb: {title: 'English', right: 'GB'}, + fr: {title: 'Français', left: '🇫🇷'}, + ja: {left: '🇯🇵'}, + de: {right: '🇩🇪'}, + es: 'Spain', + it: '🇮🇹 Italiano', + }, +} diff --git a/README.md b/README.md index 0b2656f..3a28f3c 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,7 @@ const myDecorator = (story, context) => { End users configure the `locales` and `locale` parameters in `.storybook/preview.js`. -`Locales` is an object where the keys are the "ids" of the locale/language and the values are the plain text name of that locale you want to use. This is what will appear in the dropdown in the toolbar. +`locales` is an object where the keys are the "ids" of the locale/language and the values are the plain text name of that locale you want to use. This is what will appear in the dropdown in the toolbar. ```javascript export const parameters = { @@ -74,4 +74,33 @@ export const parameters = { }; ``` +The `locales` object can also have values as an object with keys of `title`, `left`, or `right`. + +This is useful if you want to include an emoji flag or some other string to the left or right side. + +For example: +```javascript +export const parameters = { + locale: "en", + locales: { + en: {title: "English", left: '🇺🇸'}, + fr: {title: "Français", left: '🇫🇷'}, + ja: {title: "日本語", left: '🇯🇵'}, + }, +}; +``` + +Or something like this: +```javascript +export const parameters = { + locale: "en_US", + locales: { + en_US: {title: "English", right: 'US'}, + en_GB: {title: "English", right: 'GB'}, + fr_FR: {title: "Français", right: 'FR'}, + ja_JP: {title: "日本語", right: 'JP'}, + }, +}; +``` + Addons should instruct them to use whichever format your i18n implementation expects. diff --git a/package.json b/package.json index 3f18d31..d769575 100644 --- a/package.json +++ b/package.json @@ -50,10 +50,10 @@ "dependencies": {}, "devDependencies": { "@babel/cli": "^7.12.1", - "@babel/core": "^7.12.3", - "@babel/preset-env": "^7.12.1", + "@babel/core": "^7.15.0", + "@babel/preset-env": "^7.15.0", "@babel/preset-react": "^7.12.5", - "@babel/preset-typescript": "^7.13.0", + "@babel/preset-typescript": "^7.15.0", "@storybook/addon-essentials": "^6.2.9", "@storybook/react": "^6.2.9", "auto": "^10.3.0", diff --git a/src/Tool.tsx b/src/Tool.tsx index f7775c1..a32dea0 100644 --- a/src/Tool.tsx +++ b/src/Tool.tsx @@ -12,19 +12,34 @@ export interface Link { title: string; active: boolean; onClick: () => void; + left?: string; + right?: string; +} + +export type LocaleValue = string | {title: string, left?: string, right?: string}; + +const getValue = (value: LocaleValue) => { + if (typeof value === 'string') { + return {title: value}; + } + return { + title: value.title || '', + left: value.left, + right: value.right + }; } const getLocales = ( - locales: string[], + locales: Record, locale: string, onSelect: (selected: string) => void ): Link[] => locales - ? Object.entries(locales).map(([key, name]) => ({ - id: key, - title: name, - active: key === locale, - onClick: () => onSelect(key), + ? Object.entries(locales).map(([key, value]) => ({ + ...getValue(value), + id: key, + active: key === locale, + onClick: () => onSelect(key), })) : [ { diff --git a/stories/Test.jsx b/stories/Test.jsx new file mode 100644 index 0000000..e1d2f5c --- /dev/null +++ b/stories/Test.jsx @@ -0,0 +1,6 @@ +import React from 'react'; + +const Test = () =>
Test
; + +export default Test; + diff --git a/stories/test.stories.jsx b/stories/test.stories.jsx new file mode 100644 index 0000000..728088e --- /dev/null +++ b/stories/test.stories.jsx @@ -0,0 +1,8 @@ +import Test from './Test'; + +export default { + component: Test, + title: 'Test', +}; + +export const Default = () => ;