Add prop "Component" to <OptimizelyGridSection />

[exacs]

This PR adds a new property component in <OptimizelyGridSection /> that developers can use to pass a custom wrapper around "components".

The passed component will be similar to the ones passed in the properties row and column.

Closes #148

[JohanPetersson]

If this is the fallback, should it have any default styling?

[exacs]

Not sure. What should be the default styling?. I am not even sure if the default element should be a div...

[JohanPetersson]

What is this component wrapping? Each component/element in a row? If so, why are we not rendering these attributes on the OptimizelyComponent component (or the first HTML element in this component, like asChild)?

[exacs]

That would be a nice solution.

The problem is that we pass to <OptimizelyComponent /> the object in the component field ([A] in the code snippet below) but the key used for rendering preview attributes is one level up ([B]).

{
  "nodeType": "section",
  "__typename": "CompositionStructureNode",
  "key": "daac8080-ca93-45d8-9b8b-248efdf6ca24",
  "nodes": [
    {
      "nodeType": "row",
      "__typename": "CompositionStructureNode",
      "key": "f64672f1-e0f9-4d2b-995c-d65e1eb60329",
      "nodes": [
        {
          "nodeType": "column",
          "__typename": "CompositionStructureNode",
          "key": "a5e224d8-935a-4eb4-8507-3c5c2449755b",
          "nodes": [
            {
              "nodeType": "component",
              "__typename": "CompositionComponentNode",
              "key": "43038afe-7abe-4e67-90df-8c68dc19292a", // [B]
              "component": {
                // [A]       
                "__typename": "test_c1", 
                "p1": "hello hello"      
              }
            }
          ]
        },
      ]
    }
  ]
}

So, we need to pass key with the opti object to <OptimizelyComponent />

// Where do we include the `key`?
// - As part of `opti`? (something like `opti.__key`?)
// - As a separate property `key`? (`key` doesn't work because is a special keyword in React)
function MyComponent({ opti }) {
  const {pa} = getPreviewAttributes(opti);

  return (
    <div ...pa(opti)>
    </div>
  )
}

// This will not work because "key" is not passed down in React
function MyComponent({ opti, key }) {
  const {pa} = getPreviewAttributes(opti);

  return (
    <div ...pa(opti)>
    </div>
  )
}

[JohanPetersson]

My experience is that frontend developers are very annoyed with unnecessary wrappers that may cause their designs to break. Maybe we can make the OptimizelyComponent accept a component node, so we can pass the whole node? I think we should explore an alternative solution to this in a separate story.

[exacs]

I aagree. I will then close this PR for now and explore an alternative