Creating a simpler schema

Technical Questions
1

Hey team,

We use Typescript for all our client jobs and have recently started standardising on some specific schema management software. Specifically Zod in Typescript

Something I have noticed is that there is a huge amount of overlap between the typescript schema I am using as an interface for my component and the builder schemas I am creating.

What I would love to actually be doing is writing something similar to a zod schema that is both my typescript interface and my builder.io menu schema. One way to do this would be to use something like a json-schema to typescript function. I think your builder.io schema wouldn’t be to hard to parse in that way.

Have any of your devs experimented with such an approach?

eg

interface ILeftRight {
  leftText1?: string
  leftText1Size?: string
  leftText2?: string
  leftText2Size?: string
  leftText3?: string
  leftText3Size?: string
  leftImageSrc?: string
  leftImageAlt?: string 
  rightText1?: string
  rightText1Size?: string
  rightText2?: string
  rightText2Size?: string
  rightText3?: string
  rightText3Size?: string
  rightImageSrc?: string
  rightImageAlt?: string
  backgroundImageSrc?: string
  backgroundImageAltText?: string
  crop: boolean
  adjustVerticalPadding?: number
}

&

export const LeftRightSectionConfig = {
  name: 'Left Right',
  inputs: [
    {
      name: 'leftText1',
      type: 'string'
    },
    {
      name: 'leftText1Size',
      type: 'string',
      enum: ['6xl', '5xl', '4xl', '3xl', '2xl', 'xl', 'lg', 'md', 'sm', 'xs']
    },
    {
      name: 'leftText2',
      type: 'string'
    },
    {
      name: 'leftText2Size',
      type: 'string',
      enum: ['6xl', '5xl', '4xl', '3xl', '2xl', 'xl', 'lg', 'md', 'sm', 'xs']
    },
    {
      name: 'leftText3',
      type: 'string'
    },
    {
      name: 'leftText3Size',
      type: 'string',
      enum: ['6xl', '5xl', '4xl', '3xl', '2xl', 'xl', 'lg', 'md', 'sm', 'xs']
    },
    {
      name: 'leftImageSrc',
      type: 'file',
      allowedFileTypes: ['jpeg', 'png']
    },
    {
      name: 'leftImageAlt',
      type: 'string'
    },
    {
      name: 'rightText1',
      type: 'string'
    },
    {
      name: 'rightText1Size',
      type: 'string',
      enum: ['6xl', '5xl', '4xl', '3xl', '2xl', 'xl', 'lg', 'md', 'sm', 'xs']
    },
    {
      name: 'rightText2',
      type: 'string'
    },
    {
      name: 'rightText2Size',
      type: 'string',
      enum: ['6xl', '5xl', '4xl', '3xl', '2xl', 'xl', 'lg', 'md', 'sm', 'xs']
    },
    {
      name: 'rightText3',
      type: 'string'
    },
    {
      name: 'rightText3Size',
      type: 'string',
      enum: ['6xl', '5xl', '4xl', '3xl', '2xl', 'xl', 'lg', 'md', 'sm', 'xs']
    },
    {
      name: 'rightImageSrc',
      type: 'file',
      allowedFileTypes: ['jpeg', 'png']
    },
    {
      name: 'rightImageAlt',
      type: 'string'
    },
    {
      name: 'crop',
      type: 'boolean',
      defaultValue: true
    },
    {
      name: 'backgroundImageSrc',
      type: 'file',
      allowedFileTypes: ['jpeg', 'png']
    },
    {
      name: 'backgroundImageAltText',
      type: 'string'
    },
    {
      name: 'adjustVerticalPadding',
      type: 'number'
    }
  ]
}
2

I’m going to send this suggestion over to our engineering team! They love receiving user feedback, and most new updates are released as a result of users’ comments we send over to them. Thanks! :raised_hands: