DataViews: Split the components into composable components.

[youknowriad]

Part of #55083

Right now, when you render the DataViews component, it gets rendered all in one including:

• Search bar
• Filters
• View Config
• Layout switcher
• Pagination
• Layouts

This approach provides a straightforward way to use DataViews but lacks flexibility. For instance in #55101 we want to add a "toggle" to show the dataviews sidebar at the right of the view config dropdown. That toggle doesn't have anything to do with DataViews so it shouldn't rendered within the dataviews component.

We have two options:

Short Term option

Just have some kind of slot prop to inject UI there. I'll probably use this approach initially.

Long Term option

Expose the underlying DataViews component and allow composition:

<DataViews>
    <HStack>
        <DataViews.Search />
        <DataViews.Filters />
        <DataViews.BulkActions />
        <DataViews.LayoutSwitcher />
        <DataViews.ViewConfig />
        <Button>My custom Button</Button>
     </HStack>
      <DataViews.Layout />
      <DataViews.Pagination />
      <DataViews.BulkActionToolbar />
</DataViews>

Any thoughts @ntsekouras @ellatrix @oandregal @jorgefilipecosta
Also components team as they're exploring a similar pattern for the components package. @ciampo @mirka @DaniGuardiola

[ciampo]

Adopting compound components seems like a good idea to me, to offer an a-la-carte set of components that consumers of the package can pick and render as needed.

Other approaches that can be used (not necessarily as an alternative, but in conjunction) are render props, which allow components to identify "slots" where consumers can render custom react components.

Related, this recent article from @DaniGuardiola explores the topic in depth: https://dio.la/article/the-everything-bagel-of-components

[ntsekouras]

I think composable components are good and flexible. This actually was my approach at my very first experiment of this component.

[youknowriad]

Going to give this a try.