Should support tabbed custom types

[seanlail]

Again, I love this repo! I'm using it and finding it excellent.

I just found this issue and I'm not sure how to fix it.
If I have tabbed sections in a custom type the type generated does not know about this and all the fields are collapsed in to 1 type.

Versions

• prismic-ts-codegen: 0.0.3
• node: v16.13.1

Reproduction

Custom Type

{
  "Main" : {
    "uid" : {
      "type" : "UID",
      "config" : {
        "label" : "main_uid"
      }
    },
    "main_title" : {
      "type" : "StructuredText",
      "config" : {
        "single" : "heading1,heading2,heading3,heading4,heading5,heading6",
        "label" : "main_title"
      }
    }
  },
  "Tab" : {
    "tab_title" : {
      "type" : "StructuredText",
      "config" : {
        "single" : "heading1,heading2,heading3,heading4,heading5,heading6",
        "label" : "tab_title"
      }
    },
    "tab_rich_text" : {
      "type" : "StructuredText",
      "config" : {
        "multi" : "paragraph,preformatted,heading1,heading2,heading3,heading4,heading5,heading6,strong,em,hyperlink,image,embed,list-item,o-list-item,rtl",
        "allowTargetBlank" : true,
        "label" : "tab_rich_text"
      }
    }
  }
}

Screenshots

Main	Tab

Steps to reproduce

• Create a custom type
• Add a Title field to "Main" named "main_title"
• create a new tab named "Tab"
• Add a Title field to "Tab" named "tab_title"
• Add a RichText field to "Tab" named "tab_rich_text"
• Save
• run prismic-ts-codegen

What is expected?

Types are generated with "Main" and "Tab" fields separated.

What is actually happening?

Generated type actually looks like this

interface TabbedPageDocumentData {
    /**
     * main_title field in *Tabbed Page*
     *
     * - **Field Type**: Title
     * - **Placeholder**: *None*
     * - **API ID Path**: tabbed_page.main_title
     * - **Documentation**: https://prismic.io/docs/core-concepts/rich-text-title
     *
     */
    main_title: prismicT.TitleField;
    /**
     * tab_title field in *Tabbed Page*
     *
     * - **Field Type**: Title
     * - **Placeholder**: *None*
     * - **API ID Path**: tabbed_page.tab_title
     * - **Documentation**: https://prismic.io/docs/core-concepts/rich-text-title
     *
     */
    tab_title: prismicT.TitleField;
    /**
     * tab_rich_text field in *Tabbed Page*
     *
     * - **Field Type**: Rich Text
     * - **Placeholder**: *None*
     * - **API ID Path**: tabbed_page.tab_rich_text
     * - **Documentation**: https://prismic.io/docs/core-concepts/rich-text-title
     *
     */
    tab_rich_text: prismicT.RichTextField;
}

[angeloashmore]

Hi @seanlail, thanks for the detailed bug report.

This is actually the expected behavior; Prismic's Rest API does not separate fields in different tabs in the API response. Tabs are only used in the editing interface.

Because the API "flattens" tabs into one data property, the generated types should also match this.

What we could do, however, is add the tab name in the generated TSDoc comment. Do you think this would be helpful?

It could look like this:

/**
 * main_title field in *Tabbed Page*
 *
 * - **Field Type**: Title
 * - **Placeholder**: *None*
 * - **Tab**: Main
 * - **API ID Path**: tabbed_page.main_title
 * - **Documentation**: https://prismic.io/docs/core-concepts/rich-text-title
 *
 */

Note the new Tab list item. What do you think?

[seanlail]

Because the API "flattens" tabs into one data property, the generated types should also match this.

I didn't know this - completely agree and this makes sense then.

If it's easy to implement then the tab in the TSDoc comment could be good - I guess it's not a huge requirement though as it won't make using tabs easier... but as you explained, this is how the API works anyway.

[angeloashmore]

This is implemented in v0.0.4. For more details, see #13.

Thanks for the suggestion @seanlail! 🙂

[seanlail]

Fantastic. Thanks @angeloashmore