feat(form): allow composition

[ayoayco]

Currently, we only expose the Form component and all the control components are rendered and ordered according to the configuration.

We should next allow users of the library to compose the form as they want.

It should look something like

<Form>
  <TextInput />
  <TextArea />
  <RadioGroup>
    <Radio />
    <Radio />
    <Radio />
  </RadioGroup>
</Form>

[Icyscools]

Should we map the FormControl name and the component in this way?

const form = new FormGroup([
  {
    name: 'username',
    label: 'Username',
  },
  {
    name: 'password',
    label: 'Password',
    type: 'password',
  }
]
---
<Form formGroups={form}>
  <TextInput name="username" />
  <TextInput name="password" />
</Form>

We add a attribute name for each component . When it have name, it'll try to map the FormControl in the FormGroup first.

[ayoayco]

Yes exactly.

What I am unsure of right now is if we still need the control components or can we just use HTML elements directly

<Form formGroups={formgrp}>
  <input name="username" />
  <input name="password" />
</Form>

[Icyscools]

I'm not quite sure how to access the components in slots.

Looking on this. It said:

Unlike props, which are attributes passed to an Astro component available for use throughout your component with Astro.props, slots render child HTML elements where they are written.

so, I think it can't be possible to access the components in slots which we passed from the parent components.

Any idea? @ayoayco @fazzaamiarso

[fazzaamiarso]

@Icyscools if I'm right, you can access child nodes with assignedNode() https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/assignedNodes

[Icyscools]

Not sure if we can access that via server-side. But it's worth to try. Thanks! @fazzaamiarso