Storybook Refactor + Mui Stories

.storybook/main.ts

@@ -1,7 +1,7 @@
 import type { StorybookConfig } from '@storybook/react-webpack5';
 const config: StorybookConfig = {
   stories: [
-    '../src/**/*.stories.mdx', 
+    '../src/**/*.mdx', 
     '../src/**/*.stories.@(js|jsx|ts|tsx)'
   ],
 
@@ -14,6 +14,7 @@ const config: StorybookConfig = {
     '@storybook/addon-themes',
     '@storybook/addon-webpack5-compiler-babel',
     '@storybook/addon-a11y',
+    '@kemuridama/storybook-addon-github',
   ],
 
   framework: {
@@ -24,7 +25,23 @@ const config: StorybookConfig = {
   docs: {},
 
   typescript: {
-    reactDocgen: 'react-docgen-typescript'
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      // Speeds up Storybook build time
+      compilerOptions: {
+        allowSyntheticDefaultImports: false,
+        esModuleInterop: false,
+      },
+      // Makes union prop types like variant and size appear as select controls
+      shouldExtractLiteralValuesFromEnum: true,
+      // Makes string and boolean types that can be undefined appear as inputs and switches
+      shouldRemoveUndefinedFromOptional: true,
+      // Filter out third-party props from node_modules except @mui packages
+      propFilter: (prop) =>
+        prop.parent
+          ? !/node_modules\/(?!@mui)/.test(prop.parent.fileName)
+          : true,
+    },
   },
   webpackFinal: async config => {
     // Grab the existing rule that handles SVG imports

.storybook/preview.ts → .storybook/preview.tsx

@@ -1,4 +1,7 @@
+import * as React from 'react';
 import { Preview, ReactRenderer } from "@storybook/react";
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { fn } from '@storybook/test';
 import { withTests } from '@storybook/addon-jest';
 import { withThemeFromJSXProvider } from '@storybook/addon-themes';
@@ -26,16 +29,26 @@ const preview: Preview = {
     }),
     withTests({
       results,
-    })
+    }),
+    (Story) => (
+      <LocalizationProvider dateAdapter={AdapterMoment}>
+        <Story />
+      </LocalizationProvider>
+    )
   ],
   parameters: {
-    actions: { onClick: fn() },
+    actions: { onClick: fn(), argTypesRegex: '^on[A-Z].*' },
     controls: {
+      expanded: true, // Adds the description and default columns
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/,
       },
     },
+    github: {
+      repository: "UKHomeOffice/drt-react",
+      branch: "main",
+    }
   },
 };