Improvement/artesca 9682

.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');