POC: subgroups in editor sidebar

[timoconnellaus]

Adds sub categories in the editor sidebar

Subcategories can be added to the group in the definition with :: notation

{
  type: "select",
  prop: "twHeight",
  label: "List Item Height (tw)",
  group: "Wrapped List Properties::Margins & Padding",
  params: {
    options: tailwindHeights.map((height) => ({
      value: height,
      label: height,
    })),
  },
  defaultValue: "10",
},

[vercel]

@timoconnellaus is attempting to deploy a commit to the Shopstory Team on Vercel.

A member of the Team first needs to authorize it.

[r00dY]

I like it, looks good too. The only question: why not just a separate subgroup property instead of :: separator?

[timoconnellaus]

To be honest because there was so much logic deep into the product for the groups. I got a bit lazy and made the superficial change 😂. I will change it to subgroup.

[timoconnellaus]

@r00dY I thought about this a bit more and I thought maybe a more flexible approach would be to allow for an extra field in the SchemaProp called metadata and then allow people to customise groups as they see fit by providing a custom component that is used to render groups

This could be implemented using #53

[r00dY]

I like the approach. Really really like it. There's also #37 that is about customising topbar, I even suggested similar approach. Actually all the UI around canvas (sidebar on the right, potential sidebar on the left, topbar etc) could be totally customisable and just a function of editor state (which also changes when users interact with the canvas). I'll think about it during the weekend but it's a very good approach and probably could be done quickly.