New FoundryVtt Dev, I want to adapt a system, where to start?

  static DEFAULT_OPTIONS = {
    position: {
      width: 600,
    },
  };

  static DEFAULT_OPTIONS = {
    position: {
      width: 600,
    },
  };

export class DragonBallUniverseDialog extends foundry.applications.api.DialogV2 {
    static DEFAULT_OPTIONS = {
        position: {
            width: 600,
        },
    };
}

export class DragonBallUniverseDialog extends foundry.applications.api.DialogV2 {
    static DEFAULT_OPTIONS = {
        position: {
            width: 600,
        },
    };
}

let data;

data = await DragonBallUniverseDialog.input({
  window: { title: "Strike Roll Customisation!" },
  content: content,
  ok: {
    label: "Roll",
    icon: "fa-solid fa-dice-d6",
  },
  submit: result => {
    console.log(result);
  }
});

let data;

data = await DragonBallUniverseDialog.input({
  window: { title: "Strike Roll Customisation!" },
  content: content,
  ok: {
    label: "Roll",
    icon: "fa-solid fa-dice-d6",
  },
  submit: result => {
    console.log(result);
  }
});

foundry.applications.api.DialogV2.input({
    window: { title: "Strike Roll Customisation!" },
    position: {
        width: 1000,
    },
    content: content,
    ok: {
        label: "Roll",
        icon: "fa-solid fa-dice-d6",
    },
    submit: result => {
        console.log(result);
    }
});

foundry.applications.api.DialogV2.input({
    window: { title: "Strike Roll Customisation!" },
    position: {
        width: 1000,
    },
    content: content,
    ok: {
        label: "Roll",
        icon: "fa-solid fa-dice-d6",
    },
    submit: result => {
        console.log(result);
    }
});

let content = "<input type='text' name='test' value='Test'></input>";
const result = await foundry.applications.api.DialogV2.input({
    window: { title: "Strike Roll Customisation!" },
    position: {
        width: 1000,
    },
    content: content,
    ok: {
        label: "Roll",
        icon: "fa-solid fa-dice-d6",
    },
});
result;

let content = "<input type='text' name='test' value='Test'></input>";
const result = await foundry.applications.api.DialogV2.input({
    window: { title: "Strike Roll Customisation!" },
    position: {
        width: 1000,
    },
    content: content,
    ok: {
        label: "Roll",
        icon: "fa-solid fa-dice-d6",
    },
});
result;

{
    "test": "Test (or the value typed)"
}

{
    "test": "Test (or the value typed)"
}

{{! Transformations Tab }}
<section class='tab transformations scrollable {{tab.cssClass}}' data-group='primary' data-tab='transformations'>

{{! Editors must receive enriched text data from getData to properly handle rolls, UUID links, etc. }}
  {{#if editable}} 
    <prose-mirror name="system.transformationTabDescription" data-document-uuid="{{actor.uuid}}" value="{{system.transformationTabDescription}}" collaborate="true" toggled="true">
      {{{enrichedTransformationInformation}}}
    </prose-mirror>
  {{else}} {{{enrichedTransformationInformation}}}
  {{/if}}
</section>

{{! Transformations Tab }}
<section class='tab transformations scrollable {{tab.cssClass}}' data-group='primary' data-tab='transformations'>

{{! Editors must receive enriched text data from getData to properly handle rolls, UUID links, etc. }}
  {{#if editable}} 
    <prose-mirror name="system.transformationTabDescription" data-document-uuid="{{actor.uuid}}" value="{{system.transformationTabDescription}}" collaborate="true" toggled="true">
      {{{enrichedTransformationInformation}}}
    </prose-mirror>
  {{else}} {{{enrichedTransformationInformation}}}
  {{/if}}
</section>

{{! Biography Tab }}
<section
  class='tab biography scrollable {{tab.cssClass}}'
  data-group='primary'
  data-tab='biography'
>
  {{! Editors must receive enriched text data from getData to properly handle rolls, UUID links, etc. }}
  {{#if editable}} 
    <prose-mirror name="system.biography" data-document-uuid="{{actor.uuid}}" value="{{system.biography}}" collaborate="true" toggled="true">
      {{{enrichedTransformationInformation}}}
    </prose-mirror>
  {{else}} {{{enrichedBiography}}}
  {{/if}}
</section>

{{! Biography Tab }}
<section
  class='tab biography scrollable {{tab.cssClass}}'
  data-group='primary'
  data-tab='biography'
>
  {{! Editors must receive enriched text data from getData to properly handle rolls, UUID links, etc. }}
  {{#if editable}} 
    <prose-mirror name="system.biography" data-document-uuid="{{actor.uuid}}" value="{{system.biography}}" collaborate="true" toggled="true">
      {{{enrichedTransformationInformation}}}
    </prose-mirror>
  {{else}} {{{enrichedBiography}}}
  {{/if}}
</section>

case 'transformations':
        // Enrich biography info for display
        // Enrichment turns text like `[[/r 1d10]]` into buttons
        context.enrichedTransformationInformation = await ux.TextEditor.enrichHTML(
          this.actor.system.transformationTabDescription,
          {
            // Whether to show secret blocks in the finished html
            secrets: this.document.isOwner,
            // Data to fill in for inline rolls
            rollData: this.actor.getRollData(),
            // Relative UUID resolution
            relativeTo: this.actor,
          }
        );
        break;
      case 'gear':
        context.tab = context.tabs[partId];
        break;
      case 'biography':
        context.tab = context.tabs[partId];
        // Enrich biography info for display
        // Enrichment turns text like `[[/r 1d10]]` into buttons
        context.enrichedBiography = await ux.TextEditor.enrichHTML(
          this.actor.system.biography,
          {
            // Whether to show secret blocks in the finished html
            secrets: this.document.isOwner,
            // Data to fill in for inline rolls
            rollData: this.actor.getRollData(),
            // Relative UUID resolution
            relativeTo: this.actor,
          }
        );
        break;

case 'transformations':
        // Enrich biography info for display
        // Enrichment turns text like `[[/r 1d10]]` into buttons
        context.enrichedTransformationInformation = await ux.TextEditor.enrichHTML(
          this.actor.system.transformationTabDescription,
          {
            // Whether to show secret blocks in the finished html
            secrets: this.document.isOwner,
            // Data to fill in for inline rolls
            rollData: this.actor.getRollData(),
            // Relative UUID resolution
            relativeTo: this.actor,
          }
        );
        break;
      case 'gear':
        context.tab = context.tabs[partId];
        break;
      case 'biography':
        context.tab = context.tabs[partId];
        // Enrich biography info for display
        // Enrichment turns text like `[[/r 1d10]]` into buttons
        context.enrichedBiography = await ux.TextEditor.enrichHTML(
          this.actor.system.biography,
          {
            // Whether to show secret blocks in the finished html
            secrets: this.document.isOwner,
            // Data to fill in for inline rolls
            rollData: this.actor.getRollData(),
            // Relative UUID resolution
            relativeTo: this.actor,
          }
        );
        break;