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.

25 files changed, 71 insertions, 91 deletions

diff --git a/src/components/molecules/layout/branding.stories.tsx b/src/components/molecules/layout/branding.stories.tsx
index 94bb166..04844e2 100644
--- a/src/components/molecules/layout/branding.stories.tsx
+++ b/src/components/molecules/layout/branding.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import Branding from './branding';
+import { Branding } from './branding';
 
 /**
  * Branding - Storybook Meta
diff --git a/src/components/molecules/layout/branding.test.tsx b/src/components/molecules/layout/branding.test.tsx
index b3dfaa9..3aa125d 100644
--- a/src/components/molecules/layout/branding.test.tsx
+++ b/src/components/molecules/layout/branding.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Branding from './branding';
+import { Branding } from './branding';
 
 describe('Branding', () => {
   it('renders a photo', () => {
diff --git a/src/components/molecules/layout/branding.tsx b/src/components/molecules/layout/branding.tsx
index 10574ab..b105796 100644
--- a/src/components/molecules/layout/branding.tsx
+++ b/src/components/molecules/layout/branding.tsx
@@ -1,9 +1,9 @@
 import Link from 'next/link';
 import { FC, useRef } from 'react';
 import { useIntl } from 'react-intl';
-import useStyles from '../../../utils/hooks/use-styles';
-import Heading from '../../atoms/headings/heading';
-import FlippingLogo, { type FlippingLogoProps } from '../images/flipping-logo';
+import { useStyles } from '../../../utils/hooks';
+import { Heading } from '../../atoms';
+import { FlippingLogo, type FlippingLogoProps } from '../images';
 import styles from './branding.module.scss';
 
 export type BrandingProps = Pick<FlippingLogoProps, 'photo'> & {
@@ -30,7 +30,7 @@ export type BrandingProps = Pick<FlippingLogoProps, 'photo'> & {
  *
  * Render the branding logo, title and optional baseline.
  */
-const Branding: FC<BrandingProps> = ({
+export const Branding: FC<BrandingProps> = ({
   baseline,
   isHome = false,
   photo,
@@ -79,18 +79,18 @@ const Branding: FC<BrandingProps> = ({
   return (
     <div className={styles.wrapper}>
       <FlippingLogo
-        className={styles.logo}
+        {...props}
         altText={altText}
+        className={styles.logo}
         logoTitle={logoTitle}
         photo={photo}
         ref={logoRef}
-        {...props}
       />
       <Heading
+        className={styles.title}
         isFake={!isHome}
         level={1}
         withMargin={false}
-        className={styles.title}
         ref={titleRef}
       >
         {withLink ? (
@@ -103,10 +103,10 @@ const Branding: FC<BrandingProps> = ({
       </Heading>
       {baseline && (
         <Heading
+          className={styles.baseline}
           isFake={true}
           level={4}
           withMargin={false}
-          className={styles.baseline}
           ref={baselineRef}
         >
           {baseline}
@@ -115,5 +115,3 @@ const Branding: FC<BrandingProps> = ({
     </div>
   );
 };
-
-export default Branding;
diff --git a/src/components/molecules/layout/card.stories.tsx b/src/components/molecules/layout/card.stories.tsx
index 87051a9..a9545d1 100644
--- a/src/components/molecules/layout/card.stories.tsx
+++ b/src/components/molecules/layout/card.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import Card from './card';
+import { Card } from './card';
 import { cover, id, meta, tagline, title, url } from './card.fixture';
 
 /**
diff --git a/src/components/molecules/layout/card.test.tsx b/src/components/molecules/layout/card.test.tsx
index 825ad41..0fcd59e 100644
--- a/src/components/molecules/layout/card.test.tsx
+++ b/src/components/molecules/layout/card.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Card from './card';
+import { Card } from './card';
 import { cover, id, meta, tagline, title, url } from './card.fixture';
 
 describe('Card', () => {
diff --git a/src/components/molecules/layout/card.tsx b/src/components/molecules/layout/card.tsx
index 50431d8..c342d0e 100644
--- a/src/components/molecules/layout/card.tsx
+++ b/src/components/molecules/layout/card.tsx
@@ -1,10 +1,9 @@
 import { FC } from 'react';
-import { type Image } from '../../../types/app';
-import ButtonLink from '../../atoms/buttons/button-link';
-import Heading, { type HeadingLevel } from '../../atoms/headings/heading';
-import ResponsiveImage from '../images/responsive-image';
+import { type Image } from '../../../types';
+import { ButtonLink, Heading, type HeadingLevel } from '../../atoms';
+import { ResponsiveImage } from '../images';
+import { Meta, type MetaData } from './meta';
 import styles from './card.module.scss';
-import Meta, { type MetaData } from './meta';
 
 export type CardProps = {
   /**
@@ -46,7 +45,7 @@ export type CardProps = {
  *
  * Render a link with minimal information about its content.
  */
-const Card: FC<CardProps> = ({
+export const Card: FC<CardProps> = ({
   className = '',
   cover,
   id,
@@ -59,8 +58,8 @@ const Card: FC<CardProps> = ({
   return (
     <ButtonLink
       aria-labelledby={`${id}-heading`}
-      target={url}
       className={`${styles.wrapper} ${className}`}
+      target={url}
     >
       <article className={styles.article}>
         <header className={styles.header}>
@@ -91,5 +90,3 @@ const Card: FC<CardProps> = ({
     </ButtonLink>
   );
 };
-
-export default Card;
diff --git a/src/components/molecules/layout/code.stories.tsx b/src/components/molecules/layout/code.stories.tsx
index c3fbf22..d20cdbe 100644
--- a/src/components/molecules/layout/code.stories.tsx
+++ b/src/components/molecules/layout/code.stories.tsx
@@ -1,12 +1,12 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import CodeComponent from './code';
+import { Code } from './code';
 
 /**
  * Code - Storybook Meta
  */
 export default {
   title: 'Molecules/Layout/Code',
-  component: CodeComponent,
+  component: Code,
   args: {
     filterOutput: false,
     outputPattern: '#output#',
@@ -82,11 +82,9 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof CodeComponent>;
+} as ComponentMeta<typeof Code>;
 
-const Template: ComponentStory<typeof CodeComponent> = (args) => (
-  <CodeComponent {...args} />
-);
+const Template: ComponentStory<typeof Code> = (args) => <Code {...args} />;
 
 const javascriptCodeSample = `
 const foo = () => {
diff --git a/src/components/molecules/layout/code.test.tsx b/src/components/molecules/layout/code.test.tsx
index b825fec..8687693 100644
--- a/src/components/molecules/layout/code.test.tsx
+++ b/src/components/molecules/layout/code.test.tsx
@@ -1,5 +1,5 @@
 import { render } from '../../../../tests/utils';
-import Code from './code';
+import { Code } from './code';
 
 const code = `
 function foo() {
diff --git a/src/components/molecules/layout/code.tsx b/src/components/molecules/layout/code.tsx
index 4eb9be3..a1aadd8 100644
--- a/src/components/molecules/layout/code.tsx
+++ b/src/components/molecules/layout/code.tsx
@@ -1,8 +1,9 @@
 import { FC, useRef } from 'react';
-import usePrism, {
+import {
   type OptionalPrismPlugin,
   type PrismLanguage,
-} from '../../../utils/hooks/use-prism';
+  usePrism,
+} from '../../../utils/hooks';
 import styles from './code.module.scss';
 
 export type CodeProps = {
@@ -37,7 +38,7 @@ export type CodeProps = {
  *
  * Render a code block with syntax highlighting.
  */
-const Code: FC<CodeProps> = ({
+export const Code: FC<CodeProps> = ({
   children,
   filterOutput = false,
   language,
@@ -55,16 +56,14 @@ const Code: FC<CodeProps> = ({
   return (
     <div className={styles.wrapper} ref={wrapperRef}>
       <pre
-        className={className}
-        tabIndex={0}
+        {...props}
         {...attributes}
         {...outputAttribute}
-        {...props}
+        className={className}
+        tabIndex={0}
       >
         <code className={`language-${language}`}>{children}</code>
       </pre>
     </div>
   );
 };
-
-export default Code;
diff --git a/src/components/molecules/layout/columns.stories.tsx b/src/components/molecules/layout/columns.stories.tsx
index 7105bb9..4745dbf 100644
--- a/src/components/molecules/layout/columns.stories.tsx
+++ b/src/components/molecules/layout/columns.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import Column from '../../atoms/layout/column';
-import Columns from './columns';
+import { Column } from '../../atoms';
+import { Columns } from './columns';
 
 export default {
   title: 'Molecules/Layout/Columns',
diff --git a/src/components/molecules/layout/columns.test.tsx b/src/components/molecules/layout/columns.test.tsx
index 5a23d0d..c907d8b 100644
--- a/src/components/molecules/layout/columns.test.tsx
+++ b/src/components/molecules/layout/columns.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from '../../../../tests/utils';
-import Column from '../../atoms/layout/column';
-import Columns from './columns';
+import { Column } from '../../atoms';
+import { Columns } from './columns';
 
 const column1 =
   '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/molecules/layout/columns.tsx b/src/components/molecules/layout/columns.tsx
index ec62b18..b5bd9b5 100644
--- a/src/components/molecules/layout/columns.tsx
+++ b/src/components/molecules/layout/columns.tsx
@@ -1,5 +1,5 @@
 import { FC, ReactComponentElement } from 'react';
-import Column from '../../atoms/layout/column';
+import { Column } from '../../atoms';
 import styles from './columns.module.scss';
 
 export type ColumnsProps = {
@@ -26,7 +26,7 @@ export type ColumnsProps = {
  *
  * Render some Column components as columns.
  */
-const Columns: FC<ColumnsProps> = ({
+export const Columns: FC<ColumnsProps> = ({
   children,
   className = '',
   count,
@@ -36,14 +36,7 @@ const Columns: FC<ColumnsProps> = ({
   const responsiveClass = responsive
     ? `wrapper--responsive`
     : 'wrapper--no-responsive';
+  const wrapperClass = `${styles.wrapper} ${styles[countClass]} ${styles[responsiveClass]} ${className}`;
 
-  return (
-    <div
-      className={`${styles.wrapper} ${styles[countClass]} ${styles[responsiveClass]} ${className}`}
-    >
-      {children}
-    </div>
-  );
+  return <div className={wrapperClass}>{children}</div>;
 };
-
-export default Columns;
diff --git a/src/components/molecules/layout/index.ts b/src/components/molecules/layout/index.ts
new file mode 100644
index 0000000..9fa1216
--- /dev/null
+++ b/src/components/molecules/layout/index.ts
@@ -0,0 +1,8 @@
+export * from './branding';
+export * from './card';
+export * from './code';
+export * from './columns';
+export * from './meta';
+export * from './page-footer';
+export * from './page-header';
+export * from './widget';
diff --git a/src/components/molecules/layout/meta.stories.tsx b/src/components/molecules/layout/meta.stories.tsx
index 3a204c0..50ed252 100644
--- a/src/components/molecules/layout/meta.stories.tsx
+++ b/src/components/molecules/layout/meta.stories.tsx
@@ -1,7 +1,7 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import descriptionListItemStories from '../../atoms/lists/description-list-item.stories';
+import descriptionListItemStories from '../../atoms/lists/description-list-group.stories';
 import descriptionListStories from '../../atoms/lists/description-list.stories';
-import MetaComponent, { MetaData } from './meta';
+import { Meta as MetaComponent, MetaData } from './meta';
 
 /**
  * Meta - Storybook Meta
diff --git a/src/components/molecules/layout/meta.test.tsx b/src/components/molecules/layout/meta.test.tsx
index e9deb23..1087fbb 100644
--- a/src/components/molecules/layout/meta.test.tsx
+++ b/src/components/molecules/layout/meta.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from '../../../../tests/utils';
-import { getFormattedDate } from '../../../utils/helpers/dates';
-import Meta from './meta';
+import { getFormattedDate } from '../../../utils/helpers';
+import { Meta } from './meta';
 
 const data = {
   publication: { date: '2022-04-09' },
diff --git a/src/components/molecules/layout/meta.tsx b/src/components/molecules/layout/meta.tsx
index 48c0748..53128a7 100644
--- a/src/components/molecules/layout/meta.tsx
+++ b/src/components/molecules/layout/meta.tsx
@@ -1,14 +1,12 @@
 import { FC, ReactNode } from 'react';
 import { useIntl } from 'react-intl';
+import { getFormattedDate, getFormattedTime } from '../../../utils/helpers';
 import {
-  getFormattedDate,
-  getFormattedTime,
-} from '../../../utils/helpers/dates';
-import Link from '../../atoms/links/link';
-import DescriptionList, {
+  DescriptionList,
   type DescriptionListProps,
   type DescriptionListItem,
-} from '../../atoms/lists/description-list';
+  Link,
+} from '../../atoms';
 
 export type CustomMeta = {
   label: string;
@@ -133,7 +131,7 @@ export type MetaProps = Omit<
  *
  * Renders the given metadata.
  */
-const Meta: FC<MetaProps> = ({
+export const Meta: FC<MetaProps> = ({
   data,
   itemsLayout = 'inline-values',
   withSeparator = true,
@@ -384,11 +382,9 @@ const Meta: FC<MetaProps> = ({
 
   return (
     <DescriptionList
+      {...props}
       items={getItems(data)}
       withSeparator={withSeparator}
-      {...props}
     />
   );
 };
-
-export default Meta;
diff --git a/src/components/molecules/layout/page-footer.stories.tsx b/src/components/molecules/layout/page-footer.stories.tsx
index 31b7a49..8e991a4 100644
--- a/src/components/molecules/layout/page-footer.stories.tsx
+++ b/src/components/molecules/layout/page-footer.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { MetaData } from './meta';
-import PageFooterComponent from './page-footer';
+import { PageFooter as PageFooterComponent } from './page-footer';
 
 /**
  * Page Footer - Storybook Meta
diff --git a/src/components/molecules/layout/page-footer.test.tsx b/src/components/molecules/layout/page-footer.test.tsx
index baf13b2..8497be9 100644
--- a/src/components/molecules/layout/page-footer.test.tsx
+++ b/src/components/molecules/layout/page-footer.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import PageFooter from './page-footer';
+import { PageFooter } from './page-footer';
 
 describe('PageFooter', () => {
   it('renders a footer element', () => {
diff --git a/src/components/molecules/layout/page-footer.tsx b/src/components/molecules/layout/page-footer.tsx
index 97e449f..786fca0 100644
--- a/src/components/molecules/layout/page-footer.tsx
+++ b/src/components/molecules/layout/page-footer.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import Meta, { MetaData } from './meta';
+import { Meta, MetaData } from './meta';
 
 export type PageFooterProps = {
   /**
@@ -17,12 +17,10 @@ export type PageFooterProps = {
  *
  * Render a footer element to display page meta.
  */
-const PageFooter: FC<PageFooterProps> = ({ meta, ...props }) => {
+export const PageFooter: FC<PageFooterProps> = ({ meta, ...props }) => {
   return (
     <footer {...props}>
       {meta && <Meta data={meta} withSeparator={false} />}
     </footer>
   );
 };
-
-export default PageFooter;
diff --git a/src/components/molecules/layout/page-header.stories.tsx b/src/components/molecules/layout/page-header.stories.tsx
index d58f8b5..ea943bf 100644
--- a/src/components/molecules/layout/page-header.stories.tsx
+++ b/src/components/molecules/layout/page-header.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import PageHeader from './page-header';
+import { PageHeader } from './page-header';
 
 /**
  * Page Header - Storybook Meta
diff --git a/src/components/molecules/layout/page-header.test.tsx b/src/components/molecules/layout/page-header.test.tsx
index 9c737c7..b66f77a 100644
--- a/src/components/molecules/layout/page-header.test.tsx
+++ b/src/components/molecules/layout/page-header.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import PageHeader from './page-header';
+import { PageHeader } from './page-header';
 
 const title = 'Non nemo amet';
 const intro =
diff --git a/src/components/molecules/layout/page-header.tsx b/src/components/molecules/layout/page-header.tsx
index 78d875e..9c11feb 100644
--- a/src/components/molecules/layout/page-header.tsx
+++ b/src/components/molecules/layout/page-header.tsx
@@ -1,6 +1,6 @@
 import { FC, ReactNode } from 'react';
-import Heading from '../../atoms/headings/heading';
-import Meta, { type MetaData } from './meta';
+import { Heading } from '../../atoms';
+import { Meta, type MetaData } from './meta';
 import styles from './page-header.module.scss';
 
 export type PageHeaderProps = {
@@ -27,7 +27,7 @@ export type PageHeaderProps = {
  *
  * Render a header element with page title, meta and intro.
  */
-const PageHeader: FC<PageHeaderProps> = ({
+export const PageHeader: FC<PageHeaderProps> = ({
   className = '',
   intro,
   meta,
@@ -63,5 +63,3 @@ const PageHeader: FC<PageHeaderProps> = ({
     </header>
   );
 };
-
-export default PageHeader;
diff --git a/src/components/molecules/layout/widget.stories.tsx b/src/components/molecules/layout/widget.stories.tsx
index dd5a30b..8fb868d 100644
--- a/src/components/molecules/layout/widget.stories.tsx
+++ b/src/components/molecules/layout/widget.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import headingButtonStories from '../buttons/heading-button.stories';
-import Widget from './widget';
+import { Widget } from './widget';
 
 /**
  * Widget - Storybook Meta
diff --git a/src/components/molecules/layout/widget.test.tsx b/src/components/molecules/layout/widget.test.tsx
index 47282a0..11b37a5 100644
--- a/src/components/molecules/layout/widget.test.tsx
+++ b/src/components/molecules/layout/widget.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Widget from './widget';
+import { Widget } from './widget';
 
 const children = 'Widget body';
 const title = 'Widget title';
diff --git a/src/components/molecules/layout/widget.tsx b/src/components/molecules/layout/widget.tsx
index f50fe80..0bb04c7 100644
--- a/src/components/molecules/layout/widget.tsx
+++ b/src/components/molecules/layout/widget.tsx
@@ -1,7 +1,5 @@
 import { FC, ReactNode, useState } from 'react';
-import HeadingButton, {
-  type HeadingButtonProps,
-} from '../buttons/heading-button';
+import { HeadingButton, type HeadingButtonProps } from '../buttons';
 import styles from './widget.module.scss';
 
 export type WidgetProps = Pick<
@@ -31,7 +29,7 @@ export type WidgetProps = Pick<
  *
  * Render an expandable widget.
  */
-const Widget: FC<WidgetProps> = ({
+export const Widget: FC<WidgetProps> = ({
   children,
   className = '',
   expanded = true,
@@ -46,11 +44,10 @@ const Widget: FC<WidgetProps> = ({
     ? 'widget--has-borders'
     : 'widget--no-borders';
   const scrollClass = withScroll ? 'widget--has-scroll' : 'widget--no-scroll';
+  const widgetClass = `${styles.widget} ${styles[bordersClass]} ${styles[stateClass]} ${styles[scrollClass]} ${className}`;
 
   return (
-    <div
-      className={`${styles.widget} ${styles[bordersClass]} ${styles[stateClass]} ${styles[scrollClass]} ${className}`}
-    >
+    <div className={widgetClass}>
       <HeadingButton
         level={level}
         title={title}
@@ -62,5 +59,3 @@ const Widget: FC<WidgetProps> = ({
     </div>
   );
 };
-
-export default Widget;