4 components like Form (configurable), Combo-box, Array, RTE can be added

[sanjeetkumaritoutlook-user]

I checked in Components List (https://air.js.org/docs/intro): 4 components can be added, which are currently missing, as I see this in other enterprise Design systems also such as Liberty Mutual FLUID Design System (this is also built using StencilJS, see here: https://fluid-components.libertymutual.com/fluid/index.html ). The missing components are:

Form - (it should be configuration based , not like hardcoding each control tag. The configuration should accept functions also like dynamically showing hiding a field- something similar can be found here: https://fluid-components.libertymutual.com/fluid/fluid-form.html )
Combo-box- ( it should be a mix of select + input field, i.e it can take any arbitrary value , apart from the pre-defined option in option dropdown list. something similar can eb found here: https://fluid-components.libertymutual.com/fluid/fluid-combo-box.html)
Array (it can be part of form component, something similar: https://fluid-components.libertymutual.com/fluid/fluid-form-array.html)
Rich Text Editor (it can be built using tinymce under the hood, it is free under license gpl, for version 7, something similar to this: https://www.tiny.cloud/docs/tinymce/latest/full-featured-premium-demo/)
Solution ideas and examples
For Form: https://fluid-components.libertymutual.com/fluid/fluid-form.html
For Combo-box: https://fluid-components.libertymutual.com/fluid/fluid-combo-box.html
For Array: https://fluid-components.libertymutual.com/fluid/fluid-form-array.html
For RTE: https://www.tiny.cloud/docs/tinymce/latest/full-featured-premium-demo/

[SisyphusZheng]

I checked in Components List (https://air.js.org/docs/intro): 4 components can be added, which are currently missing, as I see this in other enterprise Design systems also such as Liberty Mutual FLUID Design System (this is also built using StencilJS, see here: https://fluid-components.libertymutual.com/fluid/index.html ). The missing components are:

Form - (it should be configuration based , not like hardcoding each control tag. The configuration should accept functions also like dynamically showing hiding a field- something similar can be found here: https://fluid-components.libertymutual.com/fluid/fluid-form.html )

Combo-box- ( it should be a mix of select + input field, i.e it can take any arbitrary value , apart from the pre-defined option in option dropdown list. something similar can eb found here: https://fluid-components.libertymutual.com/fluid/fluid-combo-box.html)

Array (it can be part of form component, something similar: https://fluid-components.libertymutual.com/fluid/fluid-form-array.html)

Rich Text Editor (it can be built using tinymce under the hood, it is free under license gpl, for version 7, something similar to this: https://www.tiny.cloud/docs/tinymce/latest/full-featured-premium-demo/)

Solution ideas and examples

For Form: https://fluid-components.libertymutual.com/fluid/fluid-form.html

For Combo-box: https://fluid-components.libertymutual.com/fluid/fluid-combo-box.html

For Array: https://fluid-components.libertymutual.com/fluid/fluid-form-array.html

For RTE: https://www.tiny.cloud/docs/tinymce/latest/full-featured-premium-demo/

Thx for advice，i will do that. btw,This is my practice project. I previously used Stencil, but now I feel it’s too heavy and the ecosystem is relatively small. Currently, I’m more active with Fresh Preact. Regarding this project, I’m considering replacing it with a combination of Vite, TailwindCSS, and Lit, or using Preact to output it as a web component. I’m seeking opinions on this.

[sanjeetkumaritoutlook-user]

Stencil is better compared to Lit, as many Enterprise design systems with complex components have been developed using Stencil itself, such as Porsche design system(https://designsystem.porsche.com/v3/components/introduction/), Ionic itself (https://ionicframework.com/docs/components), Liberty Mutual FLUID design system ( https://fluid-components.libertymutual.com/fluid/index.html) is a very fine example of creating very complex components in a Design system,. I am yet to find any enterprise Level design system or component library built using Lit.
For references:
https://ionic.io/blog/the-quest-for-ssr-with-web-components-a-stencil-developers-journey
https://medium.com/8451/how-we-chose-to-build-our-design-system-using-stenciljs-web-components-4878c36743c5

[SisyphusZheng]

Stencil is better compared to Lit, as many Enterprise design systems with complex components have been developed using Stencil itself, such as Porsche design system(https://designsystem.porsche.com/v3/components/introduction/), Ionic itself (https://ionicframework.com/docs/components), Liberty Mutual FLUID design system ( https://fluid-components.libertymutual.com/fluid/index.html) is a very fine example of creating very complex components in a Design system,. I am yet to find any enterprise Level design system or component library built using Lit.

For references:

https://ionic.io/blog/the-quest-for-ssr-with-web-components-a-stencil-developers-journey

https://medium.com/8451/how-we-chose-to-build-our-design-system-using-stenciljs-web-components-4878c36743c5

cool and thx for ur reply