From 383e147d23918945b5542cb53f686831c181577c Mon Sep 17 00:00:00 2001
From: Mozafar Haider <mozafar@dhis2.org>
Date: Tue, 24 Sep 2024 18:10:36 +0100
Subject: [PATCH] fix(storybook): fix code tab

---
 storybook/config/main.js    | 19 ++++++++++++++-----
 storybook/config/preview.js | 19 +++++++++----------
 storybook/package.json      | 26 +++++++++++++-------------
 3 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/storybook/config/main.js b/storybook/config/main.js
index ad7eb950e1..b7333273bb 100644
--- a/storybook/config/main.js
+++ b/storybook/config/main.js
@@ -1,4 +1,4 @@
-import { dirname, join } from 'path'
+import path, { dirname, join } from 'path'
 const { babelConfig } = require('../src/babel-config.js')
 const { loadStories } = require('../src/load-stories.js')
 const { webpackConfig } = require('../src/webpack-config.js')
@@ -9,10 +9,19 @@ module.exports = {
             name: '@storybook/addon-essentials',
             options: { docs: false },
         },
-        {
-            name: '@storybook/addon-storysource',
-            options: { loaderOptions: { injectDecorator: false } },
-        },
+        '@mihkeleidast/storybook-addon-source',
+        // {
+        //     name: '@storybook/addon-storysource',
+        //     options: {
+        //         rule: {
+        //             test: /prod\.stories\.jsx?$/,
+        //             // include: [path.resolve(__dirname, '../../')], // You can specify directories
+        //         },
+        //         sourceLoaderOptions: {
+        //             injectStoryParameters: false,
+        //         },
+        //     },
+        // },
         getAbsolutePath('@storybook/addon-a11y'),
         getAbsolutePath('@storybook/preset-create-react-app'),
     ],
diff --git a/storybook/config/preview.js b/storybook/config/preview.js
index b4a5f6002a..6dda94cdb5 100644
--- a/storybook/config/preview.js
+++ b/storybook/config/preview.js
@@ -1,12 +1,11 @@
 import '@fontsource/roboto/latin.css'
 import { CssReset } from '@dhis2-ui/css'
 import React, { Fragment } from 'react'
-// import { jsxDecorator } from 'storybook-addon-jsx'
 import '@storybook/addon-console'
+const { withJsx } = require('@mihkeleidast/storybook-addon-source')
 
 export const decorators = [
-    // Enable storybook jsx visualization
-    // jsxDecorator,
+    withJsx,
     /**
      * Basic wrapper for all our components, styles the root elements and applies
      * our css reset for consistency/
@@ -39,13 +38,13 @@ export const parameters = {
             method: 'alphabetical',
         },
     },
-    jsx: {
-        filterProps: (val) => val !== undefined,
-        showDefaultProps: false,
-        functionValue: (fn) => fn.name,
-        tabStop: 4,
-        maxInlineAttributesLineLength: 80,
-    },
+    // jsx: {
+    //     filterProps: (val) => val !== undefined,
+    //     showDefaultProps: false,
+    //     functionValue: (fn) => fn.name,
+    //     tabStop: 4,
+    //     maxInlineAttributesLineLength: 80,
+    // },
     // A11y addon config
     a11y: {
         // the target DOM element
diff --git a/storybook/package.json b/storybook/package.json
index 3b790e369e..b4e0ceff61 100644
--- a/storybook/package.json
+++ b/storybook/package.json
@@ -25,23 +25,23 @@
         "@dhis2-ui/css": "9.11.4",
         "@dhis2/ui-constants": "9.11.4",
         "@fontsource/roboto": "^4.5.0",
-        "@storybook/addon-a11y": "^8.0.6",
+        "@storybook/addon-a11y": "^8.3.3",
         "@storybook/addon-console": "^3.0.0",
-        "@storybook/addon-essentials": "^8.0.6",
-        "@storybook/addon-storysource": "^8.0.6",
-        "@storybook/channels": "^8.0.6",
-        "@storybook/components": "^8.0.6",
-        "@storybook/core-events": "^8.0.6",
-        "@storybook/node-logger": "^8.0.6",
-        "@storybook/preset-create-react-app": "^8.0.6",
-        "@storybook/react": "^8.0.6",
-        "@storybook/theming": "^8.0.6",
-        "storybook-addon-jsx": "^7.3.14"
+        "@storybook/addon-essentials": "^8.3.3",
+        "@storybook/addon-storysource": "^8.3.3",
+        "@storybook/channels": "^8.3.3",
+        "@storybook/components": "^8.3.3",
+        "@storybook/core-events": "^8.3.3",
+        "@storybook/node-logger": "^8.3.3",
+        "@storybook/preset-create-react-app": "^8.3.3",
+        "@storybook/react": "^8.3.3",
+        "@storybook/theming": "^8.3.3",
+        "@mihkeleidast/storybook-addon-source": "1.0.1"
     },
     "devDependencies": {
-        "@storybook/react-webpack5": "^8.0.6",
+        "@storybook/react-webpack5": "^8.3.3",
         "crypto-browserify": "^3.12.0",
-        "storybook": "^8.0.6",
+        "storybook": "^8.3.3",
         "stream-browserify": "^3.0.0",
         "styled-jsx": "^4.0.1"
     }