[Bug]: The mdx-to-csf codemod doesn't remove extracted components from the mdx file

[valentinpalkovic]

The mdx-to-csf codemod doesn't remove extracted components from mdx files.

Example:

// accordion.stories.mdx
import { extractArgTypes } from '@astrouxds/storybook-addon-docs-stencil'
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
import { html, render } from 'lit-html'

<Meta
    title="Components/Accordion"
    component="rux-accordion"
    subcomponents={{ RuxAccordionItem: 'rux-accordion-item' }}
    argTypes={extractArgTypes('rux-accordion')}
    parameters={{
      actions: {
          handles: [
              'ruxexpanded rux-accordion-item',
              'ruxcollapsed rux-accordion-item',
          ],
      },
    }}
/>

# Accordion
## Guidelines

-   [Astro UXDS: Accordion](https://www.astrouxds.com/components/accordion/)

export const Default = (args) => {
    return html`
<div style="padding: 5%;">
    <rux-accordion
        ?disabled="${args.disabled}"
        ?disallow-multiple="${args.disallowMultiple}"
    >
        <rux-accordion-item><div slot="label">Title 1</div><p>Content 1</p></rux-accordion-item>
        <rux-accordion-item><div slot="label">Title 2</div><p>Content 2</p></rux-accordion-item>
        <rux-accordion-item><div slot="label">Title 3</div><p>Content 3</p></rux-accordion-item>
    </rux-accordion>
</div>
    `
}

<Canvas>
    <Story
        name="Default"
        args={{
            disabled: false,
            disallowMultiple: false,
        }}
    >
        {Default.bind()}
    </Story>
</Canvas>

Is transformed into:

// accordion.stories.js
import { extractArgTypes } from '@astrouxds/storybook-addon-docs-stencil'
import { html, render } from 'lit-html'

const Default = (args) => {
    return html`
        <div style="padding: 5%;">
            <rux-accordion
                ?disabled="${args.disabled}"
                ?disallow-multiple="${args.disallowMultiple}"
            >
                <rux-accordion-item
                    ><div slot="label">Title 1</div>
                    <p>Content 1</p></rux-accordion-item
                >
                <rux-accordion-item
                    ><div slot="label">Title 2</div>
                    <p>Content 2</p></rux-accordion-item
                >
                <rux-accordion-item
                    ><div slot="label">Title 3</div>
                    <p>Content 3</p></rux-accordion-item
                >
            </rux-accordion>
        </div>
    `
}

export default {
    title: 'Components/Accordion',
    component: 'rux-accordion',

    subcomponents: {
        RuxAccordionItem: 'rux-accordion-item',
    },

    argTypes: extractArgTypes('rux-accordion'),

    parameters: {
        actions: {
            handles: [
                'ruxexpanded rux-accordion-item',
                'ruxcollapsed rux-accordion-item',
            ],
        },
    },
}

export const Default_ = {
    render: Default.bind(),
    name: 'Default',

    args: {
        disabled: false,
        disallowMultiple: false,
    },
}

And:

// accordion.mdx
import { extractArgTypes } from '@astrouxds/storybook-addon-docs-stencil'
import { Meta, Story, Canvas, ArgsTable } from '@storybook/blocks'
import { html, render } from 'lit-html'
import * as AccordionStories from './accordion.stories';

<Meta of={AccordionStories} />

# Accordion

An Accordion is a device which presents a set of summary items which can expose details based on each summary. An item can be expanded to reveal details, and collapsed to hide details.

## Guidelines

* [Astro UXDS: Accordion](https://www.astrouxds.com/components/accordion/)

export const Default = (args) => {
    return html`
<div style="padding: 5%;">
    <rux-accordion
        ?disabled="${args.disabled}"
        ?disallow-multiple="${args.disallowMultiple}"
    >
        <rux-accordion-item><div slot="label">Title 1</div><p>Content 1</p></rux-accordion-item>
        <rux-accordion-item><div slot="label">Title 2</div><p>Content 2</p></rux-accordion-item>
        <rux-accordion-item><div slot="label">Title 3</div><p>Content 3</p></rux-accordion-item>
    </rux-accordion>
</div>
    `
}

<Canvas>
  <Story of={AccordionStories.Default_} />
</Canvas>

[ndelangen]

I'm confused about these code examples, could you help me understand what exactly it is that's wrong in them?

[valentinpalkovic]

@ndelangen This part is obsolete in the mdx file:

export const Default = (args) => {
    return html`
<div style="padding: 5%;">
    <rux-accordion
        ?disabled="${args.disabled}"
        ?disallow-multiple="${args.disallowMultiple}"
    >
        <rux-accordion-item><div slot="label">Title 1</div><p>Content 1</p></rux-accordion-item>
        <rux-accordion-item><div slot="label">Title 2</div><p>Content 2</p></rux-accordion-item>
        <rux-accordion-item><div slot="label">Title 3</div><p>Content 3</p></rux-accordion-item>
    </rux-accordion>
</div>
    `
}

I have discussed that with @kasperpeulen and the reason why the components were not removed was a general anxiety of breaking existing references inside the mdx file. So removing the components from the MDX files might be potentially disruptive.