refactor(storybook/forms): Rewrite stories for SpinFormik (#8660)

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

.storybook/main.js

@@ -1,8 +1,9 @@
-const deckWebpackConfigurer = require('../webpack.config');
 const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
 
+const deckWebpackConfigurer = require('../webpack.config');
+
 module.exports = {
-  addons: ['@storybook/preset-typescript', '@storybook/addon-essentials'],
+  addons: ['@storybook/preset-typescript', '@storybook/addon-essentials', '@storybook/addon-storysource'],
   stories: [
     '../app/scripts/modules/core/src/presentation/**/*.stories.[tj]sx',
     '../app/scripts/modules/core/src/presentation/**/*.stories.mdx',
@@ -30,6 +31,16 @@ module.exports = {
           { loader: '@mdx-js/loader', options: { compilers: [createCompiler()] } },
         ],
       },
+      {
+        test: /\.stories\.tsx?$/,
+        loaders: [
+          {
+            loader: require.resolve('@storybook/source-loader'),
+            options: { parser: 'typescript' },
+          },
+        ],
+        enforce: 'pre',
+      },
     ];
 
     config.watch = true;

.storybook/preview.js

@@ -0,0 +1,13 @@
+import { setConsoleOptions } from '@storybook/addon-console';
+
+setConsoleOptions({
+  panelInclude: [/{/],
+});
+
+export const parameters = {
+  options: {
+    storySort: {
+      order: ['Forms', ['Intro']],
+    },
+  },
+};