Allow switch on PrestaShop BO themes

storybook/.storybook/main.ts

@@ -18,12 +18,13 @@ const config: StorybookConfig = {
                 ],
                 additionalWatchPaths: [
                     'assets',
-                ]
+                ],
             }
         },
     },
     docs: {
         autodocs: "tag",
     },
+    staticDirs: ['../public'],
 };
 export default config;

storybook/.storybook/preview.ts

@@ -1,19 +1,42 @@
 import { Preview, twig } from "@sensiolabs/storybook-symfony-webpack5";
-import './bo-themes/1.7.8.0/theme.css';
+
+const cssEntrypoints = {
+  '1.7.8.0': '/bo-themes/1.7.8.0/theme.css',
+  '1.7.3.0': '/bo-themes/1.7.3.0/css/admin-theme.css',
+};
+const availableBoThemes = Object.keys(cssEntrypoints);
+const defaultBoTheme = availableBoThemes[0];
 
 const preview: Preview = {
   parameters: {
     backgrounds: {
       disable: true,
     },
   },
+  globalTypes: {
+    backofficeTheme: {
+      description: "PrestaShop Back-office theme",
+      toolbar: {
+        icon: "paintbrush",
+        default: defaultBoTheme,
+        items: availableBoThemes.map((prestashopVersion) => ({
+          value: prestashopVersion,
+          title: `PrestaShop ${prestashopVersion}`,
+        })),
+      },
+    },
+  },
   decorators: [
     (story, context) => {
+      const selectedTheme = context.globals.backofficeTheme || defaultBoTheme;
+      const cssContents = (cssEntrypoints[selectedTheme]);
+
       const calledStory = story();
       calledStory.template = twig(`
         <div id="main">
           <div class="bootstrap">
             ${calledStory.template.getSource()}
+            <link rel="stylesheet" type="text/css" href="${cssContents}" />
           </div>
         </div>
       `);