fix(storybook): fix code tab

dhis2 · Sep 24, 2024 · 283a555 · 283a555
1 parent fc45bbb
commit 283a555
Show file tree

Hide file tree

Showing 5 changed files with 1,669 additions and 3,032 deletions.
diff --git 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
@@ -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
@@ -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"
  }

diff --git a/storybook/src/webpack-config.js b/storybook/src/webpack-config.js
@@ -111,6 +111,12 @@ function modify_internal_package_resolutions(cfg) {
  cfg.resolve.alias[name] = path.resolve(PROJECT_ROOT, index[0])
  }
 
+ cfg.resolve.alias['./src/calendar/calendar.js'] =
+ '/home/mozafar/code/dhis/ui/node_modules/@dhis2-ui/calendar/src/calendar.js'
+
+ cfg.resolve.alias['./src/stories/calendar.prod.stories.js'] =
+ '/home/mozafar/code/dhis/ui/node_modules/@dhis2-ui/calendar/src/calendar.js'
+
  console.info('custom => Resolve aliases for internal packages:')
  console.dir(cfg.resolve.alias, { depth: 1 })
 
@@ -146,6 +152,20 @@ function modify_webpack_plugins(cfg) {
  console.dir(...removed, { depth: 0 })
  }
 
+ /*
+ [
+ 'name', 'mode',
+ 'bail', 'devtool',
+ 'entry', 'output',
+ 'stats', 'watchOptions',
+ 'externals', 'ignoreWarnings',
+ 'plugins', 'module',
+ 'resolve', 'optimization',
+ 'performance', 'experiments',
+ 'resolveLoader'
+ ]*/
+ // console.log(cfg)
+ // throw 'err'
  return cfg
 }