feat: storybook 8

.gitignore

@@ -4,5 +4,4 @@ storybook-static/
 build-storybook.log
 .DS_Store
 .env
-.idea
-.yarn
+.idea

.storybook/local-preset.js

@@ -2,14 +2,14 @@
  * to load the built addon in this test Storybook
  */
 function previewAnnotations(entry = []) {
-    return [...entry, require.resolve('../dist/preview.mjs')];
+  return [...entry, require.resolve("../dist/preview.js")];
 }
 
 function managerEntries(entry = []) {
-    return [...entry, require.resolve('../dist/manager.mjs')];
+  return [...entry, require.resolve("../dist/manager.js")];
 }
 
 module.exports = {
-    managerEntries,
-    previewAnnotations,
+  managerEntries,
+  previewAnnotations,
 };

.storybook/main.ts

@@ -1,19 +1,18 @@
 import type { StorybookConfig } from "@storybook/react-vite";
-
 const config: StorybookConfig = {
-    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-    addons: [
-        "@storybook/addon-links",
-        "@storybook/addon-essentials",
-        "@storybook/addon-interactions",
-        "./local-preset.js",
-    ],
-    framework: {
-        name: "@storybook/react-vite",
-        options: {},
-    },
-    docs: {
-        autodocs: "tag",
-    },
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "./local-preset.js",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
 };
-export default config;
+export default config;

.storybook/preview.ts

@@ -6,9 +6,9 @@ const preview: Preview = {
         locales: {
             en: {title: 'English', right: '🇺🇸'},
             gb: {title: 'English', right: 'GB'},
-            fr: {title: 'Français', left: '🇫🇷'},
-            ja: {left: '🇯🇵'},
-            de: {right: '🇩🇪'},
+            fr: {title: 'Français', icon: '🇫🇷'},
+            ja: {icon: '🇯🇵'},
+            de: {title: 'Deutsche', icon: '🇩🇪', right: 'DE'},
             es: 'Spain',
             it: '🇮🇹 Italiano',
         },

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Storybook contributors
+Copyright (c) 2023 Storybook contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -84,19 +84,19 @@ const preview: Preview = {
 };
 ```
 
-The `locales` object can also have values as an object with keys of `title`, `left`, or `right`. 
+The `locales` object can also have values as an object with keys of `title`, `icon`, and/or `right`. 
 
-This is useful if you want to include an emoji flag or some other string to the left or right side.
+This is useful if you want to include an emoji flag or some other string to the left and/or right side.
 
 For example:
 ```typescript
 const preview: Preview = {
     globals: {
-        locale: "en",
+        locale: 'en',
         locales: {
-            en: {title: "English", left: '🇺🇸'},
-            fr: {title: "Français", left: '🇫🇷'},
-            ja: {title: "日本語", left: '🇯🇵'},
+            en: {icon: '🇺🇸', title: 'English', right: 'US'},
+            fr: {icon: '🇫🇷', title: 'Français', right: 'FR'},
+            ja: {icon: '🇯🇵', title: '日本語', right: 'JP'},
         },
     },
 };
@@ -106,12 +106,12 @@ Or something like this:
 ```typescript
 const preview: Preview = {
     globals: {
-        locale: "en_US",
+        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'},
+            en_US: {title: 'English', right: 'US'},
+            en_GB: {title: 'English', right: 'GB'},
+            fr_FR: {title: 'Français', right: 'FR'},
+            ja_JP: {title: '日本語', right: 'JP'},
         },
     },
 };
@@ -121,7 +121,7 @@ When the locale has been changed, an `event is emitted on the addons-channel`.
 
 You can `subscribe to this event in your preview.ts`, to configure global environment settings yourself, related to your i18n-config.
 
-The event is emmited with the `selected locale as a parameter`.
+The event is emitted with the `selected locale as a parameter`.
 
 Your implementation could look like this:
 ```javascript

manager.js

@@ -1 +1 @@
-export * from './dist/manager';
+import './dist/manager';