Create the form elements of the design system

[MellyGray]

Overview of the Feature Request

We would like to add form elements of our design system as React components and document them in Storybook. This will make it easier for developers to use and maintain consistent form elements across our applications. We are also planning to export this elements in an npm module so they should be independent of the business logic.

The form elements would be the ones documented in the Design System Analysis document.

These form elements would be using the Design tokens as SASS variables if applicable. These variables are described in the document

What kind of user is the feature intended for?

This feature is intended for developers who use React to build and test components for our web application.

What inspired the request?

Our design system includes a set of form elements, such as text inputs, select menus, and checkboxes, that are used consistently across our applications. By creating reusable React components for these elements and documenting them in Storybook, we can provide a centralized and easy-to-use reference for developers. Moreover, this components would be part of a components library exported to an npm module so contributors can use them in their Dataverse plugins.

Some references for the Storybook:

• Vibe Design System
• Storybook Design System
• More references

What existing behavior do you want changed?

We want to add a new section to Storybook that displays our form elements as React components. This section should include documentation on how to use each component, as well as examples of how the components can be customized.

Any brand new behavior do you want to add to Dataverse?

No, this feature request does not introduce any brand new behavior to Dataverse.

Any open or closed issues related to this feature request?

• Identify UI elements for the Dataverse Design System and create issues for their development #14

• Create the design tokens of the design system using SASS variables #30