[HOLD nothing works, we are doomed] Upgrade storybook from v6 to v7

.storybook/main.js

@@ -1,12 +1,30 @@
 module.exports = {
-    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-    addons: ['@storybook/addon-essentials', '@storybook/addon-a11y', '@storybook/addon-react-native-web'],
-    staticDirs: ['./public', {from: '../assets/css', to: 'css'}, {from: '../assets/fonts/web', to: 'fonts'}],
+    framework: '@storybook/react-webpack5',
     core: {
-        builder: 'webpack5',
+        builder: {
+            name: '@storybook/builder-webpack5',
+        },
     },
+    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+    addons: ['@storybook/addon-essentials', '@storybook/addon-a11y',
+        {
+            name: '@storybook/addon-react-native-web',
+            options: {
+                modulesToTranspile: ['@onfido/react-native-sdk', '@rnmapbox/maps', '@ua/react-native-airship'],
+                babelPlugins: [
+                    "@babel/plugin-transform-class-properties",
+                    "@babel/plugin-transform-private-methods",
+                    "@babel/plugin-transform-private-property-in-object",
+                ],
+            },
+        }
+    ],
+    staticDirs: ['./public', {from: '../assets/css', to: 'css'}, {from: '../assets/fonts/web', to: 'fonts'}],
     managerHead: (head) => `
         ${head}
         ${process.env.ENV === 'staging' ? '<meta name="robots" content="noindex">' : ''}
     `,
+    docs: {
+        autodocs: true
+    },
 };

.storybook/webpack.config.js

@@ -41,6 +41,10 @@ module.exports = ({config}) => {
     const babelRule = custom.module.rules[babelRulesIndex];
     config.module.rules.push(babelRule);
 
+    const lottieRulesIndex = _.findIndex(custom.module.rules, (rule) => rule.type === 'asset/resource');
+    const lottielRule = custom.module.rules[lottieRulesIndex];
+    config.module.rules.push(lottielRule);
+
     // Allows loading SVG - more context here https://github.com/storybookjs/storybook/issues/6188
     const fileLoaderRule = _.find(config.module.rules, (rule) => rule.test && rule.test.test('.svg'));
     fileLoaderRule.exclude = /\.svg$/;

config/webpack/webpack.common.js

@@ -23,6 +23,7 @@ const includeModules = [
     'react-native-qrcode-svg',
     'react-native-view-shot',
     '@react-native/assets',
+    'react-native-pdf',
     'expo-av',
 ].join('|');