upgrade storybook

fix layout, healthselectorv2

update banner - renamed

update barchart

update button, chips,checkbox,circular and cloud progressbar,constrainedtext

update error pages

update of checkbox chips constrained text and cloud progress bar

update of dropdown dropzone and emptystate

update of icon and create an mdx file to display the docs, update steppers, form, linecharttemporal

add a package to control args

update banner, loader, healthSelector and globalhealthbar

clean repo, deleted unused component and their stories

update stories e-and test on others

updating input story

change input story

update storybook version

update selectinput story

add wrapper at sidebar story

change sparkline, issue with id

start update statuswrapper

change name stack story and spacing.mdx

.eslintrc.json

@@ -1,4 +1,7 @@
 {
-  "extends": "react-app",
+  "extends": [
+    "react-app",
+    "plugin:storybook/recommended"
+  ],
   "ignorePatterns": "stories"
 }

.storybook/main.js

@@ -1,20 +1,19 @@
 module.exports = {
-  stories: ['../stories/**/*.stories.@(ts|tsx|mdx)'],
+  stories: ['../stories/**/*.@(mdx|stories.@(ts|tsx))'],
+
   addons: [
     '@storybook/addon-essentials',
     '@storybook/addon-storysource',
-    '@storybook/addon-knobs',
+    // '@storybook/addon-knobs',
+    '@storybook/addon-mdx-gfm'
   ],
-  webpackFinal: async (config, { configType }) => {
-    // Resolve error when webpack-ing storybook:
-    // Can't import the named export 'Children' from non EcmaScript module (only
-    // default export is available)
-    config.module.rules.push({
-      test: /\.mjs$/,
-      include: /node_modules/,
-      type: 'javascript/auto',
-    });
 
-    return config;
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
   },
+
+  docs: {
+    autodocs: true
+  }
 };

package.json

@@ -16,7 +16,7 @@
     "postbuild": "npm run copy-files",
     "plop": "plop",
     "test": "jest",
-    "storybook": "start-storybook -p 3000",
+    "storybook": "storybook dev -p 3000",
     "storybook:deploy": "storybook-to-ghpages"
   },
   "keywords": [],
@@ -38,22 +38,27 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
     "@js-temporal/polyfill": "^0.4.3",
-    "@storybook/addon-actions": "^6.4.22",
-    "@storybook/addon-essentials": "^6.4.22",
-    "@storybook/addon-knobs": "^6.1.20",
-    "@storybook/addon-links": "^6.4.22",
-    "@storybook/addon-storyshots": "^6.4.22",
-    "@storybook/addon-storysource": "^6.4.22",
-    "@storybook/react": "^6.4.22",
-    "@storybook/storybook-deployer": "^2.8.11",
-    "@storybook/theming": "^6.4.22",
+    "@storybook/addon-actions": "^7.5.1",
+    "@storybook/addon-essentials": "^7.5.1",
+    "@storybook/addon-knobs": "^7.0.2",
+    "@storybook/addon-links": "^7.5.1",
+    "@storybook/addon-mdx-gfm": "^7.5.1",
+    "@storybook/addon-storyshots": "^7.5.1",
+    "@storybook/addon-storysource": "^7.5.1",
+    "@storybook/blocks": "^7.5.1",
+    "@storybook/react": "^7.5.1",
+    "@storybook/react-webpack5": "^7.5.1",
+    "@storybook/storybook-deployer": "^2.8.16",
+    "@storybook/theming": "^7.5.1",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.1.9",
     "@types/jest": "^27.5.0",
     "@types/react": "^18.0.8",
     "@types/react-dom": "^18.0.3",
+    "@types/react-router": "^5.1.20",
+    "@types/react-router-dom": "^5.3.3",
     "@types/react-table": "^7.7.11",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
@@ -65,6 +70,7 @@
     "downshift": "^7.0.5",
     "eslint": "^8.15.0",
     "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-storybook": "^0.6.15",
     "husky": "^3.0.5",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
@@ -87,6 +93,7 @@
     "regenerator-runtime": "^0.13.7",
     "rimraf": "^3.0.0",
     "source-map-explorer": "^2.0.1",
+    "storybook": "^7.5.1",
     "styled-components": "^5.2.1",
     "styled-system": "^5.1.5",
     "typescript": "^4.6.4",
@@ -139,6 +146,6 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^0.1.10",
-    "framer-motion": "^4.1.17"
+    "@storybook/preview-api": "^7.5.1"
   }
 }