Having trouble figuring out why the arg controls on the docs page is positioned at the top of the page

For some reason when i look at the Docs for a story the args comes out at the top of the page, it suppose to come out inside the arg control table.

see image below

webpack.config.js

const path = require("path");
const babelSettings = require("../babel.config.js");

module.exports = async ({ config, mode }) => {
config.resolve.modules.push(path.resolve(__dirname, "../lib"));

config.resolve.extensions.push(".ts");
config.resolve.extensions.push(".tsx");

config.module.rules.push(
  {
    test: /\.(ts|tsx)$/,
    use: {
      loader: "babel-loader",
      options: {
        presets: babelSettings.presets,
        plugins: babelSettings.plugins,
        cacheDirectory: true,
      },
    },
  }
)

config.module.rules.push(
  {
    test: /\.scss$/,
    use: [
      "style-loader",
      {
        loader: "css-loader",
        options: {
          importLoaders: 1,
          modules: {
            auto: true,
            localIdentName: "[name]__[local]--[hash:base64:5]",
          },
        },
      },
      {
        loader: "sass-loader",
        options: {
          sassOptions: {
            includePaths: ["lib"],
          },
        },
      },
    ],
    include: path.resolve(__dirname, "../"),
  },
);

   return config;
};

main.ts

const path = require("path");

module.exports = {
addons: [
  "@storybook/addon-links",
  "@storybook/addon-essentials",
  "@storybook/addon-a11y",
  "storybook-addon-designs",
  "storybook-css-modules-preset",
  "@storybook/addon-storysource",
],
stories: [
  "../lib/intro.stories.mdx",
  "../lib/started.stories.mdx",
  "../lib/**/*.stories.@(mdx)",
  "../lib/**/*.stories.@(js|ts|tsx)"
],
typescript: {
  check: true,
  checkOptions: {
    tsconfig: path.resolve(__dirname, "../tsconfig.json"),
    eslint: true,
  },
  reactDocgen: "react-docgen-typescript",
  reactDocgenTypescriptOptions: {
    stsconfigPath: path.resolve(__dirname, "../tsconfig.json"),
  },
 },
};

preview.ts

import { DocsPage, DocsContainer } from "@storybook/addon-docs/blocks";
import { configure } from "@storybook/react";

import "../scss/styles.scss";

export const parameters = {
     controls: { expanded: true },
     actions: { argTypesRegex: "^on[A-Z].*" },
     a11y: {
       element: "#root",
       manual: false,
     },
     docs: {
       container: DocsContainer,
       page: DocsPage,
     },
   };

  configure(require.context("../", true, /\.stories\.(ts|tsx|mdx)$/), module);

field.stories.tsx

import React from "react";
import { withDesign } from "storybook-addon-designs";

import ReadOnlyField from ".";

export default {
  title: "Form/Field",
  component: ReadOnlyField,
  parameters: {
    componentSubtitle: "Displays a field that a user is not able to change its value",
    actions: {
    table: {
       disable: true,
    },
  },
 },
 decorators: [withDesign],
   argTypes: {
     id: {
       control: {
         disable: true,
       },
     },
     extraClasses: {
        control: {
        disable: true,
     },
    },
  },
};

export const Basic = (args: { label: string, body: string }): JSX.Element => <ReadOnlyField 
id="read-only-field" body={args.body} label={args.label} />;

Basic.args = {
  label: "Email Address",
  body: "test@test.com",
};

from Recent Questions - Stack Overflow https://ift.tt/2PdiOiN
https://ift.tt/3dJaUb5