Need Help Creating a Storybook Tab that loads in MDX Files

Question

I've spent the last day trying to create two additional tabs within my Storybook. By default it shows you the "Canvas" and "Docs" sections. I want to add two more. I was one for "Design Guidelines" and one for "Coding Guidelines". Both those tabs would load an mdx file located in the same directory that as the component stories.

I was hoping to have a file tree structure like-

Accordion.stories.mdx
Accordion.design.mdx
Accordion.coding.mdx

Where I can specify docs for designers to use in the design tab and coding for engineers/devs. Right now our solutions a kinda mix and it's harder to find stuff.

I wrote this code, but nothing is working. Seems to have a lot of magic underneath the hood. Can someone point me in the right direction or want some quick side work? I'll pay (Zelle, Paypal, Venmo) lol.

/**
         * Design Guidelines Tab for Storybook
         *
         * This code creates a Storybook tab for displaying design guidelines
         * by loading an MDX file located in the same directory as the component story.
         * The MDX file should have the same name as the component with ".design.mdx" extension.
         */
        
        import React from 'react';
        import { addons, types } from '@storybook/addons';
        import { DocsContainer } from '@storybook/addon-docs/blocks';
        import { join, dirname, basename } from 'path';
        
        // Define the title for the custom tab
        const tabTitle = 'Design Guidelines';
        
        /**
         * DesignGuidelinesTab Component
         *
         * Renders the design guidelines content for a specific story.
         * It loads the MDX file based on the story's file path and displays the content.
         *
         * @param {string} storyPath - The file path of the story component
         * @returns {React.Component} - The DesignGuidelinesTab component
         */
        const DesignGuidelinesTab = ({ storyPath }) => {
          // Create the file path for the design guidelines MDX file
          const designFilePath = join(dirname(storyPath), `${basename(storyPath, '.js')}.design.mdx`);
        
          // State to hold the content of the design guidelines MDX file
          const [designContent, setDesignContent] = React.useState('');
        
          // Fetch the design guidelines content from the MDX file
          React.useEffect(() => {
            async function fetchDesignContent() {
              try {
                const response = await fetch(designFilePath);
                const content = await response.text();
                setDesignContent(content);
              } catch (error) {
                console.error(`Error loading design file: ${error}`);
              }
            }
        
            fetchDesignContent();
          }, [designFilePath]);
        
          // Log the file path and content of the design guidelines MDX file
          console.log('Design file path:', designFilePath);
          console.log('Design file content:', designContent);
        
          return (
            <DocsContainer context={{}}>
              <div dangerouslySetInnerHTML={{ __html: designContent }} />
            </DocsContainer>
          );
        };
        
        // Register the Design Guidelines Tab addon
        addons.register('designGuidelinesTab', () => {
          addons.add('designGuidelinesTab', {
            type: types.TAB,
            title: tabTitle,
            route: ({ storyId }) => `/design-guidelines-tab/${storyId}`,
            match: ({ viewMode, storyId }) =>
              viewMode === 'design-guidelines-tab' && storyId.endsWith('--design-guidelines'),
            render: ({ active, storyId, storyContext }) => {
              // Log the file path of the current story component
              console.log('Story file path:', storyContext.parameters.fileName);
        
              // Render the DesignGuidelinesTab component if the tab is active
              if (active) {
                return <DesignGuidelinesTab storyPath={storyContext.parameters.fileName} />;
              }
              return null;
            },
          });
        });