From f861e6a269ba9f62700776d3cd13b644a9e836d4 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 20 Sep 2023 16:38:54 +0200
Subject: 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.
---
 src/components/organisms/toolbar/index.ts          |  4 +++
 .../organisms/toolbar/main-nav.stories.tsx         |  2 +-
 src/components/organisms/toolbar/main-nav.test.tsx |  2 +-
 src/components/organisms/toolbar/main-nav.tsx      | 31 +++++++++++-----------
 .../organisms/toolbar/search.stories.tsx           |  2 +-
 src/components/organisms/toolbar/search.test.tsx   |  2 +-
 src/components/organisms/toolbar/search.tsx        | 19 ++++++-------
 .../organisms/toolbar/settings.stories.tsx         |  2 +-
 src/components/organisms/toolbar/settings.test.tsx |  2 +-
 src/components/organisms/toolbar/settings.tsx      | 20 +++++++-------
 .../organisms/toolbar/toolbar.stories.tsx          |  2 +-
 src/components/organisms/toolbar/toolbar.test.tsx  |  2 +-
 src/components/organisms/toolbar/toolbar.tsx       | 25 ++++++++---------
 13 files changed, 58 insertions(+), 57 deletions(-)
 create mode 100644 src/components/organisms/toolbar/index.ts

(limited to 'src/components/organisms/toolbar')

diff --git a/src/components/organisms/toolbar/index.ts b/src/components/organisms/toolbar/index.ts
new file mode 100644
index 0000000..9433412
--- /dev/null
+++ b/src/components/organisms/toolbar/index.ts
@@ -0,0 +1,4 @@
+export * from './main-nav';
+export * from './search';
+export * from './settings';
+export * from './toolbar';
diff --git a/src/components/organisms/toolbar/main-nav.stories.tsx b/src/components/organisms/toolbar/main-nav.stories.tsx
index 7d6d915..1ef10b5 100644
--- a/src/components/organisms/toolbar/main-nav.stories.tsx
+++ b/src/components/organisms/toolbar/main-nav.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
-import MainNav from './main-nav';
+import { MainNav } from './main-nav';
 
 /**
  * MainNav - Storybook Meta
diff --git a/src/components/organisms/toolbar/main-nav.test.tsx b/src/components/organisms/toolbar/main-nav.test.tsx
index 47e7c38..12f30ce 100644
--- a/src/components/organisms/toolbar/main-nav.test.tsx
+++ b/src/components/organisms/toolbar/main-nav.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import MainNav from './main-nav';
+import { MainNav } from './main-nav';
 
 const items = [
   { id: 'home', label: 'Home', href: '/' },
diff --git a/src/components/organisms/toolbar/main-nav.tsx b/src/components/organisms/toolbar/main-nav.tsx
index 3a2fbf5..cf49bd4 100644
--- a/src/components/organisms/toolbar/main-nav.tsx
+++ b/src/components/organisms/toolbar/main-nav.tsx
@@ -1,11 +1,12 @@
 import { forwardRef, ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
-import BooleanField, {
+import {
+  BooleanField,
   type BooleanFieldProps,
-} from '../../atoms/forms/boolean-field';
-import Label from '../../atoms/forms/label';
-import Hamburger from '../../atoms/icons/hamburger';
-import Nav, { type NavProps, type NavItem } from '../../molecules/nav/nav';
+  Hamburger,
+  Label,
+} from '../../atoms';
+import { Nav, type NavProps, type NavItem } from '../../molecules';
 import mainNavStyles from './main-nav.module.scss';
 import sharedStyles from './toolbar-items.module.scss';
 
@@ -28,12 +29,7 @@ export type MainNavProps = {
   setIsActive: BooleanFieldProps['onChange'];
 };
 
-/**
- * MainNav component
- *
- * Render the main navigation.
- */
-const MainNav: ForwardRefRenderFunction<HTMLDivElement, MainNavProps> = (
+const MainNavWithRef: ForwardRefRenderFunction<HTMLDivElement, MainNavProps> = (
   { className = '', isActive, items, setIsActive },
   ref
 ) => {
@@ -62,20 +58,25 @@ const MainNav: ForwardRefRenderFunction<HTMLDivElement, MainNavProps> = (
         value="open"
       />
       <Label
-        htmlFor="main-nav-button"
         aria-label={label}
         className={`${sharedStyles.label} ${mainNavStyles.label}`}
+        htmlFor="main-nav-button"
       >
         <Hamburger iconClassName={mainNavStyles.icon} />
       </Label>
       <Nav
-        kind="main"
-        items={items}
         className={`${sharedStyles.modal} ${mainNavStyles.modal} ${className}`}
+        items={items}
+        kind="main"
         listClassName={mainNavStyles.modal__list}
       />
     </div>
   );
 };
 
-export default forwardRef(MainNav);
+/**
+ * MainNav component
+ *
+ * Render the main navigation.
+ */
+export const MainNav = forwardRef(MainNavWithRef);
diff --git a/src/components/organisms/toolbar/search.stories.tsx b/src/components/organisms/toolbar/search.stories.tsx
index 4baf0bf..3b2a747 100644
--- a/src/components/organisms/toolbar/search.stories.tsx
+++ b/src/components/organisms/toolbar/search.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
-import Search from './search';
+import { Search } from './search';
 
 /**
  * Search - Storybook Meta
diff --git a/src/components/organisms/toolbar/search.test.tsx b/src/components/organisms/toolbar/search.test.tsx
index bafb58d..625dd4b 100644
--- a/src/components/organisms/toolbar/search.test.tsx
+++ b/src/components/organisms/toolbar/search.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Search from './search';
+import { Search } from './search';
 
 describe('Search', () => {
   it('renders a button to open search modal', () => {
diff --git a/src/components/organisms/toolbar/search.tsx b/src/components/organisms/toolbar/search.tsx
index 90ee1b4..1b2643c 100644
--- a/src/components/organisms/toolbar/search.tsx
+++ b/src/components/organisms/toolbar/search.tsx
@@ -1,12 +1,13 @@
 import { forwardRef, ForwardRefRenderFunction, useRef } from 'react';
 import { useIntl } from 'react-intl';
-import useInputAutofocus from '../../../utils/hooks/use-input-autofocus';
-import BooleanField, {
+import { useInputAutofocus } from '../../../utils/hooks';
+import {
+  BooleanField,
   type BooleanFieldProps,
-} from '../../atoms/forms/boolean-field';
-import MagnifyingGlass from '../../atoms/icons/magnifying-glass';
-import FlippingLabel from '../../molecules/forms/flipping-label';
-import SearchModal, { type SearchModalProps } from '../modals/search-modal';
+  MagnifyingGlass,
+} from '../../atoms';
+import { FlippingLabel } from '../../molecules';
+import { SearchModal, type SearchModalProps } from '../modals';
 import searchStyles from './search.module.scss';
 import sharedStyles from './toolbar-items.module.scss';
 
@@ -29,7 +30,7 @@ export type SearchProps = {
   setIsActive: BooleanFieldProps['onChange'];
 };
 
-const Search: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = (
+const SearchWithRef: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = (
   { className = '', isActive, searchPage, setIsActive },
   ref
 ) => {
@@ -65,9 +66,9 @@ const Search: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = (
         value="open"
       />
       <FlippingLabel
+        aria-label={label}
         className={sharedStyles.label}
         htmlFor="search-button"
-        aria-label={label}
         isActive={isActive}
       >
         <MagnifyingGlass aria-hidden={true} />
@@ -81,4 +82,4 @@ const Search: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = (
   );
 };
 
-export default forwardRef(Search);
+export const Search = forwardRef(SearchWithRef);
diff --git a/src/components/organisms/toolbar/settings.stories.tsx b/src/components/organisms/toolbar/settings.stories.tsx
index 20d0b4d..a83f8d3 100644
--- a/src/components/organisms/toolbar/settings.stories.tsx
+++ b/src/components/organisms/toolbar/settings.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
-import Settings from './settings';
+import { Settings } from './settings';
 
 /**
  * Settings - Storybook Meta
diff --git a/src/components/organisms/toolbar/settings.test.tsx b/src/components/organisms/toolbar/settings.test.tsx
index 44bed56..d4e542d 100644
--- a/src/components/organisms/toolbar/settings.test.tsx
+++ b/src/components/organisms/toolbar/settings.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Settings from './settings';
+import { Settings } from './settings';
 
 describe('Settings', () => {
   it('renders a button to open settings modal', () => {
diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx
index 6dc73e4..8a4d4a9 100644
--- a/src/components/organisms/toolbar/settings.tsx
+++ b/src/components/organisms/toolbar/settings.tsx
@@ -1,13 +1,8 @@
 import { forwardRef, ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
-import BooleanField, {
-  type BooleanFieldProps,
-} from '../../atoms/forms/boolean-field';
-import Cog from '../../atoms/icons/cog';
-import FlippingLabel from '../../molecules/forms/flipping-label';
-import SettingsModal, {
-  type SettingsModalProps,
-} from '../modals/settings-modal';
+import { BooleanField, type BooleanFieldProps, Cog } from '../../atoms';
+import { FlippingLabel } from '../../molecules';
+import { SettingsModal, type SettingsModalProps } from '../modals';
 import settingsStyles from './settings.module.scss';
 import sharedStyles from './toolbar-items.module.scss';
 
@@ -22,7 +17,10 @@ export type SettingsProps = SettingsModalProps & {
   setIsActive: BooleanFieldProps['onChange'];
 };
 
-const Settings: ForwardRefRenderFunction<HTMLDivElement, SettingsProps> = (
+const SettingsWithRef: ForwardRefRenderFunction<
+  HTMLDivElement,
+  SettingsProps
+> = (
   {
     ackeeStorageKey,
     className = '',
@@ -58,9 +56,9 @@ const Settings: ForwardRefRenderFunction<HTMLDivElement, SettingsProps> = (
         value="open"
       />
       <FlippingLabel
+        aria-label={label}
         className={sharedStyles.label}
         htmlFor="settings-button"
-        aria-label={label}
         isActive={isActive}
       >
         <Cog aria-hidden={true} />
@@ -75,4 +73,4 @@ const Settings: ForwardRefRenderFunction<HTMLDivElement, SettingsProps> = (
   );
 };
 
-export default forwardRef(Settings);
+export const Settings = forwardRef(SettingsWithRef);
diff --git a/src/components/organisms/toolbar/toolbar.stories.tsx b/src/components/organisms/toolbar/toolbar.stories.tsx
index d613442..7bf545b 100644
--- a/src/components/organisms/toolbar/toolbar.stories.tsx
+++ b/src/components/organisms/toolbar/toolbar.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ToolbarComponent from './toolbar';
+import { Toolbar as ToolbarComponent } from './toolbar';
 
 /**
  * Toolbar - Storybook Meta
diff --git a/src/components/organisms/toolbar/toolbar.test.tsx b/src/components/organisms/toolbar/toolbar.test.tsx
index 01cc5ba..62020dc 100644
--- a/src/components/organisms/toolbar/toolbar.test.tsx
+++ b/src/components/organisms/toolbar/toolbar.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '../../../../tests/utils';
-import Toolbar from './toolbar';
+import { Toolbar } from './toolbar';
 
 const nav = [
   { id: 'home-link', href: '/', label: 'Home' },
diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx
index 339dec4..218b4fb 100644
--- a/src/components/organisms/toolbar/toolbar.tsx
+++ b/src/components/organisms/toolbar/toolbar.tsx
@@ -1,9 +1,8 @@
 import { FC, useState } from 'react';
-import useOnClickOutside from '../../../utils/hooks/use-on-click-outside';
-import useRouteChange from '../../../utils/hooks/use-route-change';
-import MainNav, { type MainNavProps } from '../toolbar/main-nav';
-import Search, { type SearchProps } from '../toolbar/search';
-import Settings, { type SettingsProps } from '../toolbar/settings';
+import { useOnClickOutside, useRouteChange } from '../../../utils/hooks';
+import { MainNav, type MainNavProps } from './main-nav';
+import { Search, type SearchProps } from './search';
+import { Settings, type SettingsProps } from './settings';
 import styles from './toolbar.module.scss';
 
 export type ToolbarProps = Pick<SearchProps, 'searchPage'> &
@@ -23,7 +22,7 @@ export type ToolbarProps = Pick<SearchProps, 'searchPage'> &
  *
  * Render the website toolbar.
  */
-const Toolbar: FC<ToolbarProps> = ({
+export const Toolbar: FC<ToolbarProps> = ({
   ackeeStorageKey,
   className = '',
   motionStorageKey,
@@ -49,18 +48,18 @@ const Toolbar: FC<ToolbarProps> = ({
   return (
     <div className={`${styles.wrapper} ${className}`}>
       <MainNav
-        items={nav}
-        isActive={isNavOpened}
-        setIsActive={() => setIsNavOpened(!isNavOpened)}
         className={styles.modal}
+        isActive={isNavOpened}
+        items={nav}
         ref={mainNavRef}
+        setIsActive={() => setIsNavOpened(!isNavOpened)}
       />
       <Search
-        searchPage={searchPage}
-        isActive={isSearchOpened}
-        setIsActive={() => setIsSearchOpened(!isSearchOpened)}
         className={`${styles.modal} ${styles['modal--search']}`}
+        isActive={isSearchOpened}
         ref={searchRef}
+        searchPage={searchPage}
+        setIsActive={() => setIsSearchOpened(!isSearchOpened)}
       />
       <Settings
         ackeeStorageKey={ackeeStorageKey}
@@ -74,5 +73,3 @@ const Toolbar: FC<ToolbarProps> = ({
     </div>
   );
 };
-
-export default Toolbar;
-- 
cgit v1.2.3