Toolbars: Generic example stories

code/addons/toolbars/template/stories/globals.stories.ts

@@ -0,0 +1,33 @@
+import globalThis from 'global';
+import { PartialStoryFn, StoryContext } from '@storybook/csf';
+
+const greetingForLocale = (locale: string) => {
+  switch (locale) {
+    case 'es':
+      return 'Hola!';
+    case 'fr':
+      return 'Bonjour !';
+    case 'zh':
+      return '你好!';
+    case 'kr':
+      return '안녕하세요!';
+    case 'en':
+    default:
+      return 'Hello';
+  }
+};
+
+export default {
+  component: null,
+  decorators: [
+    (storyFn: PartialStoryFn, { globals }: StoryContext) => {
+      const object = {
+        ...globals,
+        caption: `Locale is '${globals.locale}', so I say: ${greetingForLocale(globals.locale)}`,
+      };
+      return storyFn({ component: globalThis.Components.Pre, args: { object } });
+    },
+  ],
+};
+
+export const Basic = {};

code/addons/toolbars/template/stories/preview.ts

@@ -0,0 +1,44 @@
+export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    toolbar: {
+      icon: 'circlehollow',
+      title: 'Theme',
+      items: [
+        { value: 'light', icon: 'circlehollow', title: 'light' },
+        { value: 'dark', icon: 'circle', title: 'dark' },
+        { value: 'side-by-side', icon: 'sidebar', title: 'side by side' },
+        { value: 'stacked', icon: 'bottombar', title: 'stacked' },
+      ],
+    },
+  },
+  locale: {
+    name: 'Locale',
+    description: 'Internationalization locale',
+    toolbar: {
+      icon: 'globe',
+      shortcuts: {
+        next: {
+          label: 'Go to next language',
+          keys: ['L'],
+        },
+        previous: {
+          label: 'Go to previous language',
+          keys: ['K'],
+        },
+        reset: {
+          label: 'Reset language',
+          keys: ['meta', 'shift', 'L'],
+        },
+      },
+      items: [
+        { title: 'Reset locale', type: 'reset' },
+        { value: 'en', right: '🇺🇸', title: 'English' },
+        { value: 'es', right: '🇪🇸', title: 'Español' },
+        { value: 'zh', right: '🇨🇳', title: '中文' },
+        { value: 'kr', right: '🇰🇷', title: '한국어' },
+      ],
+    },
+  },
+};