Merge pull request #537 from Ferlab-Ste-Justine/feat/flui-139

feat: FLUI-139 Add a theme switcher, allowing switching theme from ferrlab-ui to clin

storybook/.storybook/preview.tsx

@@ -0,0 +1,54 @@
+import type { Decorator, Preview } from '@storybook/react';
+
+import 'antd/dist/antd.css';
+import '../assets/main.css';
+import React from 'react';
+
+// Import the css files for the themes
+import ferlabCSS from "!css-loader!@ferlab/ui/themes/default/theme.template.css"
+import clinCSS from "!css-loader!clin-portal-theme/themes/clin/main.css"
+
+const preview: Preview = {
+    parameters: {
+        actions: { argTypesRegex: '^on[A-Z].*' },
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        }
+    },
+    globalTypes: {
+        theme: {
+            name: 'Theme',
+            description: 'Global theme for components',
+            toolbar: {
+              icon: 'paintbrush',
+              items: [
+                { value: 'ferlab-ui', title: 'ferlab-ui - theme', default: true },
+                { value: 'clin', title: 'clin - theme' },
+              ],
+              showName: true
+            }
+        }
+    }
+};
+
+export default preview;
+
+// Decorator used to switch themes
+const withTheme: Decorator = (Story, {globals}) => {
+    let css;
+    switch(globals.theme) {
+        case "clin":
+            css = clinCSS;
+            break;
+        default:
+            css = ferlabCSS
+    }
+    return  <>
+                <style>{css.toString()}</style>
+                <Story/>
+            </>
+}
+export const decorators = [withTheme]

storybook/Makefile

@@ -0,0 +1,9 @@
+.ONESHELL:
+
+# Work with local clin-portal-theme
+clin_theme_local:
+	npm install ../../clin-portal-theme
+
+clin_theme_external:
+	sed -i '' '/clin-portal-theme/d' ./package.json
+	npm install github:Ferlab-Ste-Justine/clin-portal-theme