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.

7 files changed, 12 insertions, 14 deletions

diff --git a/src/components/atoms/loaders/index.ts b/src/components/atoms/loaders/index.ts
new file mode 100644
index 0000000..20c1500
--- /dev/null
+++ b/src/components/atoms/loaders/index.ts
@@ -0,0 +1,2 @@
+export * from './progress-bar';
+export * from './spinner';
diff --git a/src/components/atoms/loaders/progress-bar.stories.tsx b/src/components/atoms/loaders/progress-bar.stories.tsx
index 1eead64..799aacb 100644
--- a/src/components/atoms/loaders/progress-bar.stories.tsx
+++ b/src/components/atoms/loaders/progress-bar.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ProgressBarComponent from './progress-bar';
+import { ProgressBar as ProgressBarComponent } from './progress-bar';
 import { current, id, label, max, min } from './progress-bar.fixture';
 
 /**
diff --git a/src/components/atoms/loaders/progress-bar.test.tsx b/src/components/atoms/loaders/progress-bar.test.tsx
index 0310aec..be4d2c1 100644
--- a/src/components/atoms/loaders/progress-bar.test.tsx
+++ b/src/components/atoms/loaders/progress-bar.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import ProgressBar from './progress-bar';
+import { ProgressBar } from './progress-bar';
 import { current, id, label, max, min } from './progress-bar.fixture';
 
 describe('ProgressBar', () => {
diff --git a/src/components/atoms/loaders/progress-bar.tsx b/src/components/atoms/loaders/progress-bar.tsx
index 60c585a..195bb21 100644
--- a/src/components/atoms/loaders/progress-bar.tsx
+++ b/src/components/atoms/loaders/progress-bar.tsx
@@ -29,7 +29,7 @@ export type ProgressBarProps = {
  *
  * Render a progress bar.
  */
-const ProgressBar: FC<ProgressBarProps> = ({
+export const ProgressBar: FC<ProgressBarProps> = ({
   current,
   id,
   label,
@@ -42,18 +42,16 @@ const ProgressBar: FC<ProgressBarProps> = ({
         {label}
       </label>
       <progress
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={current}
         className={styles.progress__bar}
         id={id}
         max={max}
         value={current}
-        aria-valuemin={min}
-        aria-valuemax={max}
-        aria-valuenow={current}
       >
         {current}/{max}
       </progress>
     </div>
   );
 };
-
-export default ProgressBar;
diff --git a/src/components/atoms/loaders/spinner.stories.tsx b/src/components/atoms/loaders/spinner.stories.tsx
index 1792c6c..197d06c 100644
--- a/src/components/atoms/loaders/spinner.stories.tsx
+++ b/src/components/atoms/loaders/spinner.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import SpinnerComponent from './spinner';
+import { Spinner as SpinnerComponent } from './spinner';
 
 /**
  * Spinner - Storybook Meta
diff --git a/src/components/atoms/loaders/spinner.test.tsx b/src/components/atoms/loaders/spinner.test.tsx
index 0bcc189..cb0d8e2 100644
--- a/src/components/atoms/loaders/spinner.test.tsx
+++ b/src/components/atoms/loaders/spinner.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Spinner from './spinner';
+import { Spinner } from './spinner';
 
 describe('Spinner', () => {
   it('renders a spinner loader', () => {
diff --git a/src/components/atoms/loaders/spinner.tsx b/src/components/atoms/loaders/spinner.tsx
index 6655141..968290b 100644
--- a/src/components/atoms/loaders/spinner.tsx
+++ b/src/components/atoms/loaders/spinner.tsx
@@ -14,7 +14,7 @@ export type SpinnerProps = {
  *
  * Render a loading message with animation.
  */
-const Spinner: FC<SpinnerProps> = ({ message }) => {
+export const Spinner: FC<SpinnerProps> = ({ message }) => {
   const intl = useIntl();
 
   return (
@@ -23,7 +23,7 @@ const Spinner: FC<SpinnerProps> = ({ message }) => {
       <div className={styles.ball}></div>
       <div className={styles.ball}></div>
       <div className={styles.text}>
-        {message ||
+        {message ??
           intl.formatMessage({
             defaultMessage: 'Loading...',
             description: 'Spinner: loading text',
@@ -33,5 +33,3 @@ const Spinner: FC<SpinnerProps> = ({ message }) => {
     </div>
   );
 };
-
-export default Spinner;