refactor: use named export for everything except pages

Next expect a default export for pages so only those components should
use default exports. Everything else should use named exports to
reduce the number of import statements.

1 files changed, 6 insertions, 26 deletions

diff --git a/src/components/atoms/forms/select.tsx b/src/components/atoms/forms/select.tsx
index dbe9b37..14f85dc 100644
--- a/src/components/atoms/forms/select.tsx
+++ b/src/components/atoms/forms/select.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, FC, SetStateAction } from 'react';
+import { ChangeEvent, FC, SelectHTMLAttributes, SetStateAction } from 'react';
 import styles from './forms.module.scss';
 
 export type SelectOptions = {
@@ -16,19 +16,7 @@ export type SelectOptions = {
   value: string;
 };
 
-export type SelectProps = {
-  /**
-   * One or more ids that refers to the select field name.
-   */
-  'aria-labelledby'?: string;
-  /**
-   * Add classnames to the select field.
-   */
-  className?: string;
-  /**
-   * Field state. Either enabled (false) or disabled (true).
-   */
-  disabled?: boolean;
+export type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
   /**
    * Field id attribute.
    */
@@ -42,10 +30,6 @@ export type SelectProps = {
    */
   options: SelectOptions[];
   /**
-   * True if the field is required. Default: false.
-   */
-  required?: boolean;
-  /**
    * Callback function to set field value.
    */
   setValue: (value: SetStateAction<string>) => void;
@@ -60,12 +44,14 @@ export type SelectProps = {
  *
  * Render a HTML select element.
  */
-const Select: FC<SelectProps> = ({
+export const Select: FC<SelectProps> = ({
   className = '',
   options,
   setValue,
   ...props
 }) => {
+  const selectClass = `${styles.field} ${styles['field--select']} ${className}`;
+
   /**
    * Update select value when an option is selected.
    * @param e - The option change event.
@@ -86,14 +72,8 @@ const Select: FC<SelectProps> = ({
     ));
 
   return (
-    <select
-      className={`${styles.field} ${styles['field--select']} ${className}`}
-      onChange={updateValue}
-      {...props}
-    >
+    <select {...props} className={selectClass} onChange={updateValue}>
       {getOptions()}
     </select>
   );
 };
-
-export default Select;