Allow more flexible definition of the templates of the Components

[mnajdova]

Feature Request

Problem description

The base requirement for this feature request comes from the need of allowing users to redefine how the template of the components should be defined, as well as allowing them to add new custom slots, specific to the specs they have in their own application. One great example for this is the ChatMessage. Currently we have very some set of slots for the ChatMessage, with things common trough out the Chat applications on the web, but the moment users have to add something more to the ChatMessage, that is application specific, they don't have a simple way of doing it. Let's say that for some messages, generated by the application, the structure should be different (for exmaple they may have header, instead of the author and timestamp slot), they may have footer, but they want to reuse the actions available in the regular messages. When some requirement like this comes, they have to do lot's of workarounds, or improper usages of the slots, in order to make the component look as needed.

Proposed solution

In order to resolve this, and provide the users more flexible way of defining the template of the components, while still using all other benefits and prepared components for the slots from Stardust, we propose an API that will looks like this:

import { ChatMessage } from '@stardust-ui/react'
import ChatMessageHeader from './ChatMessageHeader'
import ChatMessageFooter from './ChatMessageFooter'

const ApplicationChatMessage = (props) => ChatMessage.template(props, ({slots}) => (
  <Flex>
    <ChatMessageHeader {...props.header} /> <!-- this is some custom component -->
    {slots.actionMenu}
    {slots.content}
    <ChatMessageFooter {...props.footer} />
  </Flex>
))

With this, the users can reuse the evaluted slot for the ChatMessage, as well as change their order of appearance in the DOM, and add new custom slots.

We may decide to add more arguments to the template function, like accessibility, that can be used when redefining the results, but this is still just a consideration.

[jurokapsiar]

An example for recording message:

[jurokapsiar]

can the slots be exposed as components as well? (not sure if it would help or not, just an idea to make it look more like JSX structure:

const ApplicationChatMessage = (props) => ChatMessage.template(props, ({slots}) => (
  <Flex>
    <ChatMessageHeader {...props.header} /> <!-- this is some custom component -->
    <slots.actionMenu />
    <slots.content />
    <ChatMessageFooter {...props.footer} />
  </Flex>
))