Custom components (documented with Storybook)

Every web app has some degree of commonality as far as the UI components it uses are concerned. (input fields, select components, etc...). Thus, we've taken the initiative to integrate generic components a front end project requires, along with some custom ones that we'd consider helpful, within Start UI's Storybook. Each following section has its counterpart within the Storybook and will detail the different components it consists of.

Components

• ActionsButton (opens in a new tab) : displays an action button (i.e. tagged with the "actions" icon) used to trigger a list of options to select from.
• ConfirmMenuItem (opens in a new tab) : represents a Menu tag option that requires confirmation to apply.
• ConfirmModal (opens in a new tab) : represents a basic modal that triggers an alert prompt on confirmation button click.
• ConfirmPopover (opens in a new tab) : represents a basic popover that triggers an alert prompt on confirmation button click.
• DataList (opens in a new tab) : represents a frame consisting of a header, rows and cells, used to list out elements of data set.
• DateAgo (opens in a new tab) : displays a sentence which, when hovered on, will show some inputted date's value on top of it.
• DateSelector (opens in a new tab) : displays a selected date. The different values can be selected through back and forward arrows.
• DayPicker (opens in a new tab) : displays a selected date. The different values can be selected through a calendar frame.
• FormGroup (opens in a new tab) : displays a form and its content, along with its label on top, helper message on the bottom and error message (if constrained to validation).
• Icons (opens in a new tab) : displays a generic or custom icon (i.e. fetched from an SVG file).
• InputCurrency (opens in a new tab) : displays an editable amount of money along with some currency's symbol. Its value can be bound to a state object.
• Logo (opens in a new tab) : displays Start UI's logo.
• Nav (opens in a new tab) : structures a navigation menu.
• SearchInput (opens in a new tab) : corresponds to an input field with search feature.
• TextCurrency (opens in a new tab) : displays a non-editable amount of money along with some currency's symbol. Its value can be bound to a state object.
• ResponsiveIconButton (opens in a new tab) : displays a responsive button, tagged with an icon
• Select (opens in a new tab) : represents a select input and its many variations (ex : asynchronous select, nested in popover, nested in modal, etc...)
• Sort (opens in a new tab) : sorting component. Its value must be bound to a state object of type SortValue.

Fields components for Formiz

Since we choose Formiz as our preferred library for handling forms, we've implemented the types of fields that generally appear in forms, ready to be used with Formiz, out of the box.

These include :

• FieldBooleanCheckbox (opens in a new tab) : corresponds to a boolean valued checkbox, displayed with its label and optional helper message.
• FieldCheckboxes (opens in a new tab) : represents a set of checkboxes whose possible values are fetched from an array of objects passed to the options props.
• FieldCurrency (opens in a new tab) : corresponds to a numeric input, along with a currency symbol.
• FieldDayPicker (opens in a new tab) : same as a DayPicker.
• FieldHidden (opens in a new tab) : corresponds to a hidden field.
• FieldInput (opens in a new tab) : corresponds to an input field.
• FieldMultiSelect (opens in a new tab) : corresponds to a select field which can have multiple values at one time.
• FieldRadios (opens in a new tab) : represents a set of radio buttons whose possible values are fetched from an array of objects passed to the options props.
• FieldSelect (opens in a new tab) : corresponds to a single value select field
• FieldTextarea (opens in a new tab) : corresponds to a text area, displayed with its label and optional helper message.

Errors

• ErrorBoundary (opens in a new tab) : similar to React's ErrorBoundary, which is a component that captures JavaScript errors anywhere in its child component tree, logs those errors, and displays a fallback UI instead of the component tree that crashed. In Start UI, the fallback has been customed.
• ErrorPage (opens in a new tab) : corresponds to a visual rendering of common error pages (404, 403...) , customised with Start UI's designs.