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, 42 insertions, 75 deletions

diff --git a/src/components/organisms/navbar/navbar.stories.tsx b/src/components/organisms/navbar/navbar.stories.tsx
index fef995e..95b71ef 100644
--- a/src/components/organisms/navbar/navbar.stories.tsx
+++ b/src/components/organisms/navbar/navbar.stories.tsx
@@ -1,5 +1,6 @@
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Navbar as NavbarComponent } from './navbar';
+import { NavbarItem } from './navbar-item';
 
 /**
  * Navbar - Storybook Meta
@@ -7,28 +8,15 @@ import { Navbar as NavbarComponent } from './navbar';
 export default {
   title: 'Organisms/Navbar',
   component: NavbarComponent,
-  args: {
-    searchPage: '#',
-  },
   argTypes: {
-    nav: {
-      description: 'The main nav items.',
+    children: {
+      description: 'The navbar items.',
       type: {
         name: 'object',
         required: true,
         value: {},
       },
     },
-    searchPage: {
-      control: {
-        type: 'text',
-      },
-      description: 'The search results page url.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
   },
   parameters: {
     layout: 'fullscreen',
@@ -39,72 +27,51 @@ const Template: ComponentStory<typeof NavbarComponent> = (args) => (
   <NavbarComponent {...args} />
 );
 
-const doNothing = () => {
-  // do nothing;
+/**
+ * Navbar Stories - 1 item
+ */
+export const OneItem = Template.bind({});
+OneItem.args = {
+  children: (
+    <NavbarItem icon="hamburger" id="main-nav" label="Nav">
+      The main nav contents
+    </NavbarItem>
+  ),
 };
 
 /**
- * Navbar Stories - With all items inactive
+ * Navbar Stories - 2 items
  */
-export const NavbarInactiveItems = Template.bind({});
-NavbarInactiveItems.args = {
-  items: [
-    {
-      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,
-    },
-  ],
+export const TwoItems = Template.bind({});
+TwoItems.args = {
+  children: (
+    <>
+      <NavbarItem icon="hamburger" id="main-nav" label="Nav">
+        The main nav contents
+      </NavbarItem>
+      <NavbarItem icon="magnifying-glass" id="search" label="Search">
+        A search form
+      </NavbarItem>
+    </>
+  ),
 };
 
 /**
- * Navbar Stories - With one item active
+ * Navbar Stories - 3 items
  */
-export const NavbarActiveItem = Template.bind({});
-NavbarActiveItem.args = {
-  items: [
-    {
-      icon: 'hamburger',
-      id: 'main-nav',
-      isActive: true,
-      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,
-    },
-  ],
+export const ThreeItems = Template.bind({});
+ThreeItems.args = {
+  children: (
+    <>
+      <NavbarItem icon="hamburger" id="main-nav" label="Nav">
+        The main nav contents
+      </NavbarItem>
+      <NavbarItem icon="magnifying-glass" id="search" label="Search">
+        A search form
+      </NavbarItem>
+      <NavbarItem icon="cog" id="settings" label="Settings">
+        A settings form
+      </NavbarItem>
+    </>
+  ),
 };