How to integrate CodeMirror with Storybook to edit code and see visual changes

v6
1

I want to know the steps how to integrate codemirror with storybook stories
Eg;

import React, { useEffect } from 'react';
import { Button, NotificationsContainer } from '@browserstack/design-stack';
import { CheckCircleIcon } from '@browserstack/design-stack-icons';

import DocPageTemplate from '../../.storybook/DocPageTemplate';

import FeedbackWidget, { showFeedbackWidget } from './index';

const fields = [
  {
    id: 'comment',
    label: 'Other comments',
    fieldType: 'textarea',
    placeholder: 'Please elaborate here',
    isMandatory: true,
    isResizable: true,
    errorMessage: 'Invalid comment'
  },
  {
    id: 'email',
    label: 'Business email',
    fieldType: 'input',
    placeholder: 'you@example.com',
    isMandatory: true,
    errorMessage: 'Invalid email address',
    regex: /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/
  }
];

export default {
  title: 'Services/FeedbackWidget',
  component: FeedbackWidget,
  tags: ['autodocs'],
  argTypes: {},
  parameters: {
    docs: {
      page: () => (
        <DocPageTemplate importStatement="import {FeedbackWidget} from '@browserstack/services'" />
      )
    }
  }
};

export const ModalWidget = (args) => {
  useEffect(() => {
    showFeedbackWidget(() => console.log('opened'));
  }, []);

  return (
    <>
      <Button
        onClick={() => {
          showFeedbackWidget(() => console.log('opened'));
        }}
      >
        Show Modal Widget
      </Button>
      <FeedbackWidget {...args} />
      <NotificationsContainer />
    </>
  );
};

ModalWidget.args = {
  formFields: fields,
  handleFeedbackClick: (data) => console.log(data),
  flow: [
    {
      type: 'nps',
      title: 'How was your experience with Lorem Ipsum Modal?',
      description: 'Emoji Optional description text for added context Modal'
    },
    {
      type: 'form',
      title: 'How was your experience with Lorem Ipsum Modal form?',
      description: 'Form Optional description text for added context Modal form'
    },
    {
      type: 'success',
      title: 'How was your experience with Lorem ?',
      description: 'Success Optional description text for added context',
      icon: <CheckCircleIcon className="h-10 w-10 icon-success-weaker" />
    }
  ],
  variation: 'modal',
  onFeedbackWidgetClose: (data) => {
    console.log(data);
  }
};

export const ToastWidget = (args) => {
  useEffect(() => {
    showFeedbackWidget(() => console.log('opened'));
  }, []);
  return (
    <>
      <Button
        onClick={() => {
          showFeedbackWidget();
        }}
      >
        Show Toast Widget
      </Button>
      <FeedbackWidget {...args} />
      <NotificationsContainer />
    </>
  );
};

ToastWidget.args = {
  formFields: fields,
  handleFeedbackClick: (data) => console.log(data),
  flow: [
    {
      type: 'thumbs',
      title: 'How was your experience with Lorem Ipsum Modal?',
      description: 'Emoji Optional description text for added context Modal'
    },
    {
      type: 'form',
      title: 'How was your experience with Lorem Ipsum Modal form?',
      description: 'Form Optional description text for added context Modal form'
    },
    {
      type: 'success',
      title: 'How was your experience with Lorem ?',
      description: 'Success Optional description text for added context',
      icon: <CheckCircleIcon className="h-6 w-6 icon-success-weaker" />
    }
  ],
  variation: 'toast',
  onFeedbackWidgetClose: (data) => {
    console.log(data);
  }
};