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

import toast

formating

.eslintrc.json

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

.storybook/main.js

@@ -1,10 +1,13 @@
 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
@@ -17,4 +20,12 @@ module.exports = {
 
     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,8 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^0.1.10",
-    "framer-motion": "^4.1.17"
+    "framer-motion": "^4.1.17",
+    "@storybook/preview-api": "^7.5.1"
+
   }
 }

src/lib/components/form/Form.component.tsx

@@ -91,11 +91,10 @@ const ScrollArea = styled(BasicPageLayout)`
   overflow-y: auto;
 `;
 
-const LabelContext =
-  createContext<{
-    maxLabelWidth: number;
-    setMaxLabelWidth: (setter: (value: number) => number) => void;
-  } | null>(null);
+const LabelContext = createContext<{
+  maxLabelWidth: number;
+  setMaxLabelWidth: (setter: (value: number) => number) => void;
+} | null>(null);
 
 const RequireModeContext = createContext<'all' | 'partial'>('partial');