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.

22 files changed, 66 insertions, 83 deletions

diff --git a/src/components/atoms/layout/column.stories.tsx b/src/components/atoms/layout/column.stories.tsx
index a03c462..a8d43bf 100644
--- a/src/components/atoms/layout/column.stories.tsx
+++ b/src/components/atoms/layout/column.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ColumnComponent from './column';
+import { Column as ColumnComponent } from './column';
 
 export default {
   title: 'Atoms/Layout/Column',
diff --git a/src/components/atoms/layout/column.test.tsx b/src/components/atoms/layout/column.test.tsx
index c722082..fd3c9e7 100644
--- a/src/components/atoms/layout/column.test.tsx
+++ b/src/components/atoms/layout/column.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Column from './column';
+import { Column } from './column';
 
 const body =
   'Non praesentium voluptas quisquam ex est. Distinctio accusamus facilis libero in aut. Et veritatis quo impedit fugit amet sit accusantium. Ut est rerum asperiores sint libero eveniet. Molestias placeat recusandae suscipit eligendi sunt hic.';
diff --git a/src/components/atoms/layout/column.tsx b/src/components/atoms/layout/column.tsx
index ec6440d..632799c 100644
--- a/src/components/atoms/layout/column.tsx
+++ b/src/components/atoms/layout/column.tsx
@@ -1,7 +1,7 @@
-import { FC, ReactNode } from 'react';
+import { FC, HTMLAttributes, ReactNode } from 'react';
 
-export type ColumnProps = {
-  children: ReactNode | ReactNode[];
+export type ColumnProps = HTMLAttributes<HTMLDivElement> & {
+  children: ReactNode;
 };
 
 /**
@@ -9,8 +9,6 @@ export type ColumnProps = {
  *
  * Render the body as a column.
  */
-const Column: FC<ColumnProps> = ({ children }) => {
-  return <div>{children}</div>;
+export const Column: FC<ColumnProps> = ({ children, ...props }) => {
+  return <div {...props}>{children}</div>;
 };
-
-export default Column;
diff --git a/src/components/atoms/layout/copyright.stories.tsx b/src/components/atoms/layout/copyright.stories.tsx
index 25d54b0..fa79d32 100644
--- a/src/components/atoms/layout/copyright.stories.tsx
+++ b/src/components/atoms/layout/copyright.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import CCBySA from '../icons/cc-by-sa';
-import CopyrightComponent from './copyright';
+import { CCBySA } from '../icons';
+import { Copyright as CopyrightComponent } from './copyright';
 
 /**
  * Copyright - Storybook Meta
diff --git a/src/components/atoms/layout/copyright.test.tsx b/src/components/atoms/layout/copyright.test.tsx
index c3eef67..3631545 100644
--- a/src/components/atoms/layout/copyright.test.tsx
+++ b/src/components/atoms/layout/copyright.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from '../../../../tests/utils';
-import CCBySA from '../icons/cc-by-sa';
-import Copyright from './copyright';
+import { CCBySA } from '../icons';
+import { Copyright } from './copyright';
 
 const dates = {
   start: '2012',
diff --git a/src/components/atoms/layout/copyright.tsx b/src/components/atoms/layout/copyright.tsx
index f70695d..1e4af5e 100644
--- a/src/components/atoms/layout/copyright.tsx
+++ b/src/components/atoms/layout/copyright.tsx
@@ -32,7 +32,7 @@ export type CopyrightProps = {
  *
  * Renders a copyright information (owner, dates, license icon).
  */
-const Copyright: FC<CopyrightProps> = ({ owner, dates, icon }) => {
+export const Copyright: FC<CopyrightProps> = ({ owner, dates, icon }) => {
   const getFormattedDate = (date: string) => {
     const datetime = new Date(date).toISOString();
 
@@ -55,5 +55,3 @@ const Copyright: FC<CopyrightProps> = ({ owner, dates, icon }) => {
     </div>
   );
 };
-
-export default Copyright;
diff --git a/src/components/atoms/layout/index.ts b/src/components/atoms/layout/index.ts
new file mode 100644
index 0000000..8cbc597
--- /dev/null
+++ b/src/components/atoms/layout/index.ts
@@ -0,0 +1,7 @@
+export * from './column';
+export * from './copyright';
+export * from './main';
+export * from './no-script';
+export * from './notice';
+export * from './section';
+export * from './sidebar';
diff --git a/src/components/atoms/layout/main.stories.tsx b/src/components/atoms/layout/main.stories.tsx
index 5bde475..ef4d728 100644
--- a/src/components/atoms/layout/main.stories.tsx
+++ b/src/components/atoms/layout/main.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import MainComponent from './main';
+import { Main as MainComponent } from './main';
 
 /**
  * Main - Storybook Meta
diff --git a/src/components/atoms/layout/main.test.tsx b/src/components/atoms/layout/main.test.tsx
index d9b9e57..f6b8064 100644
--- a/src/components/atoms/layout/main.test.tsx
+++ b/src/components/atoms/layout/main.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Main from './main';
+import { Main } from './main';
 
 const id = 'main';
 const children = 'The main content.';
diff --git a/src/components/atoms/layout/main.tsx b/src/components/atoms/layout/main.tsx
index d92a5c7..919b25a 100644
--- a/src/components/atoms/layout/main.tsx
+++ b/src/components/atoms/layout/main.tsx
@@ -1,18 +1,10 @@
-import { FC, ReactNode } from 'react';
+import { FC, HTMLAttributes, ReactNode } from 'react';
 
-export type MainProps = {
+export type MainProps = HTMLAttributes<HTMLElement> & {
   /**
    * The main body.
    */
   children: ReactNode;
-  /**
-   * Set additional classnames to the main element.
-   */
-  className?: string;
-  /**
-   * The main wrapper id.
-   */
-  id: string;
 };
 
 /**
@@ -20,8 +12,6 @@ export type MainProps = {
  *
  * Render a main element.
  */
-const Main: FC<MainProps> = ({ children, ...props }) => {
+export const Main: FC<MainProps> = ({ children, ...props }) => {
   return <main {...props}>{children}</main>;
 };
-
-export default Main;
diff --git a/src/components/atoms/layout/no-script.stories.tsx b/src/components/atoms/layout/no-script.stories.tsx
index 22d2fea..79548a1 100644
--- a/src/components/atoms/layout/no-script.stories.tsx
+++ b/src/components/atoms/layout/no-script.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import NoScript from './no-script';
+import { NoScript } from './no-script';
 
 /**
  * NoScript - Storybook Meta
diff --git a/src/components/atoms/layout/no-script.test.tsx b/src/components/atoms/layout/no-script.test.tsx
index 4c62879..3f6b79c 100644
--- a/src/components/atoms/layout/no-script.test.tsx
+++ b/src/components/atoms/layout/no-script.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import NoScript from './no-script';
+import { NoScript } from './no-script';
 
 const message = 'A noscript message.';
 
diff --git a/src/components/atoms/layout/no-script.tsx b/src/components/atoms/layout/no-script.tsx
index a503e0c..a79feaf 100644
--- a/src/components/atoms/layout/no-script.tsx
+++ b/src/components/atoms/layout/no-script.tsx
@@ -12,10 +12,11 @@ export type NoScriptProps = {
   position?: 'initial' | 'top';
 };
 
-const NoScript: FC<NoScriptProps> = ({ message, position = 'initial' }) => {
+export const NoScript: FC<NoScriptProps> = ({
+  message,
+  position = 'initial',
+}) => {
   const positionClass = styles[`noscript--${position}`];
 
   return <div className={`${styles.noscript} ${positionClass}`}>{message}</div>;
 };
-
-export default NoScript;
diff --git a/src/components/atoms/layout/notice.stories.tsx b/src/components/atoms/layout/notice.stories.tsx
index dedf834..57dddb3 100644
--- a/src/components/atoms/layout/notice.stories.tsx
+++ b/src/components/atoms/layout/notice.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import NoticeComponent from './notice';
+import { Notice as NoticeComponent } from './notice';
 
 /**
  * Notice - Storybook Meta
diff --git a/src/components/atoms/layout/notice.test.tsx b/src/components/atoms/layout/notice.test.tsx
index 56b5f85..16c530d 100644
--- a/src/components/atoms/layout/notice.test.tsx
+++ b/src/components/atoms/layout/notice.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Notice from './notice';
+import { Notice } from './notice';
 
 const message = 'Tenetur consequuntur tempore.';
 
diff --git a/src/components/atoms/layout/notice.tsx b/src/components/atoms/layout/notice.tsx
index a0d1d3e..9f69af2 100644
--- a/src/components/atoms/layout/notice.tsx
+++ b/src/components/atoms/layout/notice.tsx
@@ -1,13 +1,9 @@
-import { FC } from 'react';
+import { FC, HTMLAttributes } from 'react';
 import styles from './notice.module.scss';
 
 export type NoticeKind = 'error' | 'info' | 'success' | 'warning';
 
-export type NoticeProps = {
-  /**
-   * Set additional classnames to the notice wrapper.
-   */
-  className?: string;
+export type NoticeProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
   /**
    * The notice kind.
    */
@@ -23,16 +19,18 @@ export type NoticeProps = {
  *
  * Render a colored message depending on notice kind.
  */
-const Notice: FC<NoticeProps> = ({ className = '', kind, message }) => {
+export const Notice: FC<NoticeProps> = ({
+  className = '',
+  kind,
+  message,
+  ...props
+}) => {
   const kindClass = `wrapper--${kind}`;
+  const noticeClass = `${styles.wrapper} ${styles[kindClass]} ${className}`;
 
-  return message ? (
-    <div className={`${styles.wrapper} ${styles[kindClass]} ${className}`}>
+  return (
+    <div {...props} className={noticeClass}>
       {message}
     </div>
-  ) : (
-    <></>
   );
 };
-
-export default Notice;
diff --git a/src/components/atoms/layout/section.stories.tsx b/src/components/atoms/layout/section.stories.tsx
index 530b2a0..8ab2729 100644
--- a/src/components/atoms/layout/section.stories.tsx
+++ b/src/components/atoms/layout/section.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import Section from './section';
+import { Section } from './section';
 
 /**
  * Section - Storybook Meta
diff --git a/src/components/atoms/layout/section.test.tsx b/src/components/atoms/layout/section.test.tsx
index e31dc32..c81a0a0 100644
--- a/src/components/atoms/layout/section.test.tsx
+++ b/src/components/atoms/layout/section.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Section from './section';
+import { Section } from './section';
 
 const title = 'Section title';
 const content = 'Section content.';
diff --git a/src/components/atoms/layout/section.tsx b/src/components/atoms/layout/section.tsx
index cb727ff..107e80a 100644
--- a/src/components/atoms/layout/section.tsx
+++ b/src/components/atoms/layout/section.tsx
@@ -1,18 +1,17 @@
-import { FC, ReactNode } from 'react';
-import Heading from '../headings/heading';
+import { FC, HTMLAttributes, ReactNode } from 'react';
+import { Heading } from '../headings';
 import styles from './section.module.scss';
 
 export type SectionVariant = 'dark' | 'light';
 
-export type SectionProps = {
-  /**
-   * Set additional classnames to the section element.
-   */
-  className?: string;
+export type SectionProps = Omit<
+  HTMLAttributes<HTMLElement>,
+  'children' | 'content'
+> & {
   /**
    * The section content.
    */
-  content: ReactNode;
+  content: ReactNode | ReactNode[];
   /**
    * The section title.
    */
@@ -32,20 +31,20 @@ export type SectionProps = {
  *
  * Render a section element.
  */
-const Section: FC<SectionProps> = ({
+export const Section: FC<SectionProps> = ({
   className = '',
   content,
   title,
   variant = 'dark',
   withBorder = true,
+  ...props
 }) => {
   const borderClass = withBorder ? styles[`wrapper--borders`] : '';
   const variantClass = styles[`wrapper--${variant}`];
+  const sectionClass = `${styles.wrapper} ${borderClass} ${variantClass} ${className}`;
 
   return (
-    <section
-      className={`${styles.wrapper} ${borderClass} ${variantClass} ${className}`}
-    >
+    <section {...props} className={sectionClass}>
       <Heading level={2} className={styles.title}>
         {title}
       </Heading>
@@ -53,5 +52,3 @@ const Section: FC<SectionProps> = ({
     </section>
   );
 };
-
-export default Section;
diff --git a/src/components/atoms/layout/sidebar.stories.tsx b/src/components/atoms/layout/sidebar.stories.tsx
index 6876f95..f85e468 100644
--- a/src/components/atoms/layout/sidebar.stories.tsx
+++ b/src/components/atoms/layout/sidebar.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import SidebarComponent from './sidebar';
+import { Sidebar as SidebarComponent } from './sidebar';
 
 /**
  * Sidebar - Storybook Meta
diff --git a/src/components/atoms/layout/sidebar.test.tsx b/src/components/atoms/layout/sidebar.test.tsx
index c23c551..e2c15c3 100644
--- a/src/components/atoms/layout/sidebar.test.tsx
+++ b/src/components/atoms/layout/sidebar.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Sidebar from './sidebar';
+import { Sidebar } from './sidebar';
 
 const children = 'A widget';
 
diff --git a/src/components/atoms/layout/sidebar.tsx b/src/components/atoms/layout/sidebar.tsx
index d86af37..d290069 100644
--- a/src/components/atoms/layout/sidebar.tsx
+++ b/src/components/atoms/layout/sidebar.tsx
@@ -1,19 +1,11 @@
-import { FC, ReactNode } from 'react';
+import { FC, HTMLAttributes, ReactNode } from 'react';
 import styles from './sidebar.module.scss';
 
-export type SidebarProps = {
-  /**
-   * An accessible name for the sidebar.
-   */
-  'aria-label'?: string;
+export type SidebarProps = HTMLAttributes<HTMLElement> & {
   /**
    * The sidebar body.
    */
   children: ReactNode;
-  /**
-   * Set additional classnames to the aside element.
-   */
-  className?: string;
 };
 
 /**
@@ -21,12 +13,14 @@ export type SidebarProps = {
  *
  * Render an aside element.
  */
-const Sidebar: FC<SidebarProps> = ({ children, className = '', ...props }) => {
+export const Sidebar: FC<SidebarProps> = ({
+  children,
+  className = '',
+  ...props
+}) => {
   return (
-    <aside className={`${styles.wrapper} ${className}`} {...props}>
+    <aside {...props} className={`${styles.wrapper} ${className}`}>
       <div className={styles.body}>{children}</div>
     </aside>
   );
 };
-
-export default Sidebar;