refactor(components): replace items prop in Navbar component

* replace `items` prop with `children` prop: it is more readable this
way,
* handle navbar item state inside NavbarItem component: it avoid using
three differents states and their methods to do exactly the same thing
* remove useAutofocus hook since we can't use it anymore
* add `onActivation` and `activationHandlerDelay` prop to NavbarItem
component to be able to focus the search input only when the item is
activated (it replicates the functioning of useAutofocus hook)
* replace `ref` type in SearchForm component: it does not make sense to
use an input ref for a form. Instead I use useImperativeHandle to
provide different a focus method to the given ref.

1 files changed, 13 insertions, 34 deletions

diff --git a/src/components/organisms/navbar/navbar.test.tsx b/src/components/organisms/navbar/navbar.test.tsx
index 35b33f2..6578672 100644
--- a/src/components/organisms/navbar/navbar.test.tsx
+++ b/src/components/organisms/navbar/navbar.test.tsx
@@ -1,42 +1,21 @@
 import { describe, expect, it } from '@jest/globals';
 import { render, screen as rtlScreen } from '@testing-library/react';
-import { Navbar, type NavbarItems } from './navbar';
-
-const doNothing = () => {
-  // do nothing;
-};
-
-const items: NavbarItems = [
-  {
-    icon: 'hamburger',
-    id: 'main-nav',
-    isActive: false,
-    label: 'Nav',
-    contents: 'Main nav contents',
-    onToggle: doNothing,
-  },
-  {
-    icon: 'magnifying-glass',
-    id: 'search',
-    isActive: false,
-    label: 'Search',
-    contents: 'Search contents',
-    onToggle: doNothing,
-  },
-  {
-    icon: 'cog',
-    id: 'settings',
-    isActive: false,
-    label: 'Settings',
-    contents: 'Settings contents',
-    onToggle: doNothing,
-  },
-];
+import { Navbar } from './navbar';
+import { NavbarItem } from './navbar-item';
 
 describe('Navbar', () => {
   it('renders the given items', () => {
-    render(<Navbar items={items} />);
+    render(
+      <Navbar>
+        <NavbarItem icon="hamburger" id="main-nav" label="Main nav">
+          Main nav
+        </NavbarItem>
+        <NavbarItem icon="magnifying-glass" id="search" label="Search">
+          Search form
+        </NavbarItem>
+      </Navbar>
+    );
 
-    expect(rtlScreen.getAllByRole('listitem')).toHaveLength(items.length);
+    expect(rtlScreen.getAllByRole('listitem')).toHaveLength(2);
   });
 });