Add support to optional "select" fields

[nickfla1-mxm]

Currently the select field only support String, Number or Boolean types but in the case of optional fields forcing the user to select a value can be counter-intuitive.

Given the following example:

fields: {
  mySelect: {
    type: 'select',
    options: [
      { label: 'A', value: 'a' },
      { label: 'B', value: 'b' },
    ]
  }
}

if mySelect represents an optional value we could either

fields: {
  mySelect: {
    type: 'select',
    options: [
      { label: '', value: undefined }, // allow having `undefined` or `null` values
      { label: 'A', value: 'a' },
      { label: 'B', value: 'b' },
    ]
  }
}

or (cleaner in my opinion)

fields: {
  mySelect: {
    type: 'select',
    optional: true, // required: false alternatively
    options: [
      { label: 'A', value: 'a' },
      { label: 'B', value: 'b' },
    ]
  }
}

---

I am available to contribute directly to this feature if approved!

[FedericoBonel]

Hello @nickfla1-mxm,

I think adding an optional parameter could work, but it might also be useful to support other types too, such as objects. Perhaps we could combine both approaches to make it more flexible?

[nickfla1-mxm]

I agree, selects could have any data type as a value, though you could achieve the same with a string/numeric index an a mapping on the component side, the value stored in the data wouldn't be the exact value

[chrisvxd]

Hm does the following not already work? Puck should respect the optional typing.

type Props = {
  MyComponent: {
    fruit?: 'apple' | 'banana' // Make optional with `?`
  }
}

const conf: Config<Props> = {
  components: {
    MyComponent: {
      fields: {
        fruit: {
          type: "select",
          options: [
            { label: '', value: undefined }, // Should work because `fruit` is optional
            { label: 'Apple', value: 'apple' },
            { label: 'Banana', value: 'banana' },
          ]
        }
      }
    }
  }
}

If not, this is likely a bug, rather than requiring a new feature

[nickfla1-mxm]

At the time I've opened this issue you couldn't set value to undefined even if optional in the component props, I haven't tried on the latest Puck version

[chrisvxd]

Okay. I don't remember fixing this so I'm going to assume it's a bug and mark this as ready.

[chrisvxd]

Closing in favour of bug ticket here: #895