[ONL-8199] Migrate storybook to TS (#1833)

* [ONL-8199] chore: Updated SB files to TS. Removed skiplink fix needed in SB v6.

* [ONL-8199] chore: Refactored stories that are not depending on vue components.

* [ONL-8199] chore: Updated SB to latest version.

* [ONL-8199] chore: Removed unused eslint directives.

* [ONL-8199] chore: Move vite config to TS. Removed unused babel config.

* [ONL-8199] pr: Addressed comments.

.eslintrc.js

@@ -123,7 +123,8 @@ module.exports = {
     },
     {
       files: [
-        '**/*.story.js',
+        '.storybook/**/*.{js,ts}',
+        '**/*.story.{js,jsx,ts,tsx}',
       ],
       rules: {
         'import/no-extraneous-dependencies': 'off',

.storybook/backgrounds.ts

@@ -0,0 +1,30 @@
+export enum ChameleonTheme {
+  LIGHT = 'light',
+  DARK = 'dark',
+  LIGHT_BLUE = 'light blue',
+  DARK_BLUE = 'dark blue',
+}
+
+export type HslColor = string;
+
+export interface ChameleonThemeConfig {
+  name: ChameleonTheme,
+  value: HslColor,
+}
+
+export const LIGHT_THEME = { name: ChameleonTheme.LIGHT, value: 'hsl(192.5, 10%, 100%)' }; // --ec-theme-gray-color-level-8
+export const DARK_THEME = { name: ChameleonTheme.DARK, value: 'hsl(192.5, 10%, 20%)' }; // --ec-theme-gray-color-level-2
+export const LIGHT_BLUE_THEME = { name: ChameleonTheme.LIGHT_BLUE, value: 'hsl(192.5, 100%, 47%)' }; // --ec-theme-key-color-level-4
+export const DARK_BLUE_THEME = { name: ChameleonTheme.DARK_BLUE, value: 'hsl(192.5, 100%, 20%)' }; // --ec-theme-key-color-level-2
+
+export function getAllBackgrounds(defaultName: ChameleonTheme) {
+  return {
+    default: defaultName,
+    values: [
+      LIGHT_THEME,
+      DARK_THEME,
+      LIGHT_BLUE_THEME,
+      DARK_BLUE_THEME,
+    ],
+  };
+}

.storybook/main.js → .storybook/main.ts

@@ -1,4 +1,6 @@
-module.exports = {
+import type { StorybookConfig } from '@storybook/vue3-vite';
+
+const config: StorybookConfig = {
   framework: {
     name: '@storybook/vue3-vite',
     options: {},
@@ -20,3 +22,5 @@ module.exports = {
     autodocs: true,
   },
 };
+
+export default config;

.storybook/manager.js → .storybook/manager.ts

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import { addons } from '@storybook/addons';
 import { create } from '@storybook/theming/create';
 

.storybook/preview.ts

@@ -0,0 +1,50 @@
+import { withCssResources } from '@storybook/addon-cssresources';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import type { Preview } from '@storybook/vue3';
+
+import config from '../src/config';
+import { inlineSvgSprites, SpriteName } from '../src/icons/browser';
+// @ts-expect-error TS don't know how to handle vite's raw CSS import
+import bwTheme from '../src/styles/themes/b-w.css?inline';
+// @ts-expect-error TS don't know how to handle vite's raw CSS import
+import greenTheme from '../src/styles/themes/green.css?inline';
+// @ts-expect-error TS don't know how to handle vite's raw CSS import
+import hotpinkTheme from '../src/styles/themes/hotpink.css?inline';
+// @ts-expect-error TS don't know how to handle vite's raw CSS import
+import redTheme from '../src/styles/themes/red.css?inline';
+import { ChameleonTheme, getAllBackgrounds } from './backgrounds';
+
+import '../src/styles/themes/blue.css';
+import '../src/styles/main.css';
+
+config.sensitiveClass = 'tw-filter tw-blur-4';
+
+const preview: Preview = {
+  parameters: {
+    layout: 'fullscreen',
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    backgrounds: getAllBackgrounds(ChameleonTheme.LIGHT),
+    viewport: { viewports: INITIAL_VIEWPORTS },
+    cssresources: [
+      { id: 'green', code: `<style>\n${greenTheme}</style>`, hideCode: true },
+      { id: 'red', code: `<style>\n${redTheme}</style>`, hideCode: true },
+      { id: 'b&w', code: `<style>\n${bwTheme}</style>`, hideCode: true },
+      { id: 'hotpink', code: `<style>\n${hotpinkTheme}</style>`, hideCode: true },
+    ],
+    options: {
+      // we can't type this function, see comments in SB docs:
+      // https://storybook.js.org/docs/writing-stories/naming-components-and-hierarchy#sorting-stories
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      storySort: (a, b) => (a.title === b.title ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true })),
+    },
+    controls: {
+      expanded: true,
+    },
+  },
+  decorators: [withCssResources],
+};
+
+inlineSvgSprites([SpriteName.ROUNDED_ICONS, SpriteName.SIMPLE_ICONS, SpriteName.CURRENCY_FLAGS], '/img');
+
+export default preview;

.storybook/utils.js → .storybook/utils.ts

@@ -1,4 +1,6 @@
-export function fixedContainerDecorator(height = '100vh') {
+import type { StoryFn } from '@storybook/vue3';
+
+export function fixedContainerDecorator(height: string = '100vh'): StoryFn {
   // what is this for? an element with position: fixed always escapes the boundaries of the Docs page. See e.g.
   // ec-navigation.story.js.
   //