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.

10 files changed, 71 insertions, 76 deletions

diff --git a/src/components/organisms/forms/comment-form.stories.tsx b/src/components/organisms/forms/comment-form.stories.tsx
index 1a9e7b7..a6069e6 100644
--- a/src/components/organisms/forms/comment-form.stories.tsx
+++ b/src/components/organisms/forms/comment-form.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import CommentForm from './comment-form';
+import { CommentForm } from './comment-form';
 
 const saveComment = async () => {
   /** Do nothing. */
diff --git a/src/components/organisms/forms/comment-form.test.tsx b/src/components/organisms/forms/comment-form.test.tsx
index 10119ce..f11c449 100644
--- a/src/components/organisms/forms/comment-form.test.tsx
+++ b/src/components/organisms/forms/comment-form.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import CommentForm from './comment-form';
+import { CommentForm } from './comment-form';
 
 const saveComment = async () => {
   /** Do nothing. */
diff --git a/src/components/organisms/forms/comment-form.tsx b/src/components/organisms/forms/comment-form.tsx
index a823977..e4140dd 100644
--- a/src/components/organisms/forms/comment-form.tsx
+++ b/src/components/organisms/forms/comment-form.tsx
@@ -1,13 +1,15 @@
 import { FC, ReactNode, useState } from 'react';
 import { useIntl } from 'react-intl';
-import Button from '../../atoms/buttons/button';
-import Form, { type FormProps } from '../../atoms/forms/form';
-import Heading, {
-  type HeadingProps,
+import {
+  Button,
+  Form,
+  type FormProps,
+  Heading,
   type HeadingLevel,
-} from '../../atoms/headings/heading';
-import Spinner from '../../atoms/loaders/spinner';
-import LabelledField from '../../molecules/forms/labelled-field';
+  type HeadingProps,
+  Spinner,
+} from '../../atoms';
+import { LabelledField } from '../../molecules';
 import styles from './comment-form.module.scss';
 
 export type CommentFormData = {
@@ -46,7 +48,7 @@ export type CommentFormProps = Pick<FormProps, 'className'> & {
   titleLevel?: HeadingLevel;
 };
 
-const CommentForm: FC<CommentFormProps> = ({
+export const CommentForm: FC<CommentFormProps> = ({
   Notice,
   parentId,
   saveComment,
@@ -119,55 +121,55 @@ const CommentForm: FC<CommentFormProps> = ({
 
   return (
     <Form
-      onSubmit={submitHandler}
+      {...props}
       aria-label={formAriaLabel}
       aria-labelledby={formLabelledBy}
-      {...props}
+      onSubmit={submitHandler}
     >
       {title && (
-        <Heading id={formId} level={titleLevel} alignment={titleAlignment}>
+        <Heading alignment={titleAlignment} id={formId} level={titleLevel}>
           {title}
         </Heading>
       )}
       <LabelledField
-        type="text"
+        className={styles.field}
         id="commenter-name"
-        name="commenter-name"
         label={nameLabel}
+        name="commenter-name"
         required={true}
-        value={name}
         setValue={setName}
-        className={styles.field}
+        type="text"
+        value={name}
       />
       <LabelledField
-        type="email"
+        className={styles.field}
         id="commenter-email"
-        name="commenter-email"
         label={emailLabel}
+        name="commenter-email"
         required={true}
-        value={email}
         setValue={setEmail}
-        className={styles.field}
+        type="email"
+        value={email}
       />
       <LabelledField
-        type="text"
+        className={styles.field}
         id="commenter-website"
-        name="commenter-website"
         label={websiteLabel}
+        name="commenter-website"
         required={false}
-        value={website}
         setValue={setWebsite}
-        className={styles.field}
+        type="text"
+        value={website}
       />
       <LabelledField
-        type="textarea"
+        className={styles.field}
         id="commenter-comment"
-        name="commenter-comment"
         label={commentLabel}
+        name="commenter-comment"
         required={true}
-        value={comment}
         setValue={setComment}
-        className={styles.field}
+        type="textarea"
+        value={comment}
       />
       <Button type="submit" kind="primary" className={styles.button}>
         {intl.formatMessage({
@@ -189,5 +191,3 @@ const CommentForm: FC<CommentFormProps> = ({
     </Form>
   );
 };
-
-export default CommentForm;
diff --git a/src/components/organisms/forms/contact-form.stories.tsx b/src/components/organisms/forms/contact-form.stories.tsx
index 191d448..4df3db0 100644
--- a/src/components/organisms/forms/contact-form.stories.tsx
+++ b/src/components/organisms/forms/contact-form.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ContactForm from './contact-form';
+import { ContactForm } from './contact-form';
 
 /**
  * ContactForm - Storybook Meta
diff --git a/src/components/organisms/forms/contact-form.test.tsx b/src/components/organisms/forms/contact-form.test.tsx
index def4346..8e27cd0 100644
--- a/src/components/organisms/forms/contact-form.test.tsx
+++ b/src/components/organisms/forms/contact-form.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import ContactForm from './contact-form';
+import { ContactForm } from './contact-form';
 
 const props = {
   sendMail: async () => {
diff --git a/src/components/organisms/forms/contact-form.tsx b/src/components/organisms/forms/contact-form.tsx
index b8dcb5e..ca84c25 100644
--- a/src/components/organisms/forms/contact-form.tsx
+++ b/src/components/organisms/forms/contact-form.tsx
@@ -1,9 +1,7 @@
 import { FC, ReactNode, useState } from 'react';
 import { useIntl } from 'react-intl';
-import Button from '../../atoms/buttons/button';
-import Form from '../../atoms/forms/form';
-import Spinner from '../../atoms/loaders/spinner';
-import LabelledField from '../../molecules/forms/labelled-field';
+import { Button, Form, Spinner } from '../../atoms';
+import { LabelledField } from '../../molecules';
 import styles from './contact-form.module.scss';
 
 export type ContactFormData = {
@@ -33,7 +31,7 @@ export type ContactFormProps = {
  *
  * Render a contact form.
  */
-const ContactForm: FC<ContactFormProps> = ({
+export const ContactForm: FC<ContactFormProps> = ({
   className = '',
   Notice,
   sendMail,
@@ -94,45 +92,45 @@ const ContactForm: FC<ContactFormProps> = ({
   };
 
   return (
-    <Form aria-label={formName} onSubmit={submitHandler} className={className}>
+    <Form aria-label={formName} className={className} onSubmit={submitHandler}>
       <LabelledField
-        type="text"
+        className={styles.field}
         id="contact-name"
-        name="contact-name"
         label={nameLabel}
+        name="contact-name"
         required={true}
-        value={name}
         setValue={setName}
-        className={styles.field}
+        type="text"
+        value={name}
       />
       <LabelledField
-        type="email"
+        className={styles.field}
         id="contact-email"
-        name="contact-email"
         label={emailLabel}
+        name="contact-email"
         required={true}
-        value={email}
         setValue={setEmail}
-        className={styles.field}
+        type="email"
+        value={email}
       />
       <LabelledField
-        type="text"
+        className={styles.field}
         id="contact-object"
-        name="contact-object"
         label={objectLabel}
-        value={object}
+        name="contact-object"
         setValue={setObject}
-        className={styles.field}
+        type="text"
+        value={object}
       />
       <LabelledField
-        type="textarea"
+        className={styles.field}
         id="contact-message"
-        name="contact-message"
         label={messageLabel}
+        name="contact-message"
         required={true}
-        value={message}
         setValue={setMessage}
-        className={styles.field}
+        type="textarea"
+        value={message}
       />
       <Button type="submit" kind="primary" className={styles.button}>
         {intl.formatMessage({
@@ -154,5 +152,3 @@ const ContactForm: FC<ContactFormProps> = ({
     </Form>
   );
 };
-
-export default ContactForm;
diff --git a/src/components/organisms/forms/index.ts b/src/components/organisms/forms/index.ts
new file mode 100644
index 0000000..10eaf20
--- /dev/null
+++ b/src/components/organisms/forms/index.ts
@@ -0,0 +1,3 @@
+export * from './comment-form';
+export * from './contact-form';
+export * from './search-form';
diff --git a/src/components/organisms/forms/search-form.stories.tsx b/src/components/organisms/forms/search-form.stories.tsx
index d8c8e1e..4a0a15c 100644
--- a/src/components/organisms/forms/search-form.stories.tsx
+++ b/src/components/organisms/forms/search-form.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import SearchForm from './search-form';
+import { SearchForm } from './search-form';
 
 /**
  * SearchForm - Storybook Meta
diff --git a/src/components/organisms/forms/search-form.test.tsx b/src/components/organisms/forms/search-form.test.tsx
index 0f79caf..bc9b7a0 100644
--- a/src/components/organisms/forms/search-form.test.tsx
+++ b/src/components/organisms/forms/search-form.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import SearchForm from './search-form';
+import { SearchForm } from './search-form';
 
 describe('SearchForm', () => {
   it('renders a search input', () => {
diff --git a/src/components/organisms/forms/search-form.tsx b/src/components/organisms/forms/search-form.tsx
index a3cb6e4..f80d295 100644
--- a/src/components/organisms/forms/search-form.tsx
+++ b/src/components/organisms/forms/search-form.tsx
@@ -1,12 +1,8 @@
 import { useRouter } from 'next/router';
 import { forwardRef, ForwardRefRenderFunction, useId, useState } from 'react';
 import { useIntl } from 'react-intl';
-import Button from '../../atoms/buttons/button';
-import Form from '../../atoms/forms/form';
-import MagnifyingGlass from '../../atoms/icons/magnifying-glass';
-import LabelledField, {
-  type LabelledFieldProps,
-} from '../../molecules/forms/labelled-field';
+import { Button, Form, MagnifyingGlass } from '../../atoms';
+import { LabelledField, type LabelledFieldProps } from '../../molecules';
 import styles from './search-form.module.scss';
 
 export type SearchFormProps = Pick<LabelledFieldProps, 'hideLabel'> & {
@@ -16,12 +12,7 @@ export type SearchFormProps = Pick<LabelledFieldProps, 'hideLabel'> & {
   searchPage: string;
 };
 
-/**
- * SearchForm component
- *
- * Render a search form.
- */
-const SearchForm: ForwardRefRenderFunction<
+const SearchFormWithRef: ForwardRefRenderFunction<
   HTMLInputElement,
   SearchFormProps
 > = ({ hideLabel, searchPage }, ref) => {
@@ -48,7 +39,7 @@ const SearchForm: ForwardRefRenderFunction<
   const id = useId();
 
   return (
-    <Form grouped={false} onSubmit={submitHandler} className={styles.wrapper}>
+    <Form className={styles.wrapper} grouped={false} onSubmit={submitHandler}>
       <LabelledField
         className={styles.field}
         hideLabel={hideLabel}
@@ -61,11 +52,11 @@ const SearchForm: ForwardRefRenderFunction<
         value={value}
       />
       <Button
-        type="submit"
+        aria-label={buttonLabel}
+        className={styles.btn}
         kind="neutral"
         shape="initial"
-        className={styles.btn}
-        aria-label={buttonLabel}
+        type="submit"
       >
         <MagnifyingGlass className={styles.btn__icon} />
       </Button>
@@ -73,4 +64,9 @@ const SearchForm: ForwardRefRenderFunction<
   );
 };
 
-export default forwardRef(SearchForm);
+/**
+ * SearchForm component
+ *
+ * Render a search form.
+ */
+export const SearchForm = forwardRef(SearchFormWithRef);