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, 3 insertions, 20 deletions

diff --git a/src/components/organisms/navbar/navbar-item/navbar-item.stories.tsx b/src/components/organisms/navbar/navbar-item/navbar-item.stories.tsx
index 1c56768..93b7281 100644
--- a/src/components/organisms/navbar/navbar-item/navbar-item.stories.tsx
+++ b/src/components/organisms/navbar/navbar-item/navbar-item.stories.tsx
@@ -1,5 +1,4 @@
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { useBoolean } from '../../../../utils/hooks';
 import { NavbarItem } from './navbar-item';
 
 /**
@@ -11,23 +10,9 @@ export default {
   argTypes: {},
 } as ComponentMeta<typeof NavbarItem>;
 
-const Template: ComponentStory<typeof NavbarItem> = ({
-  isActive,
-  onDeactivate,
-  onToggle,
-  ...args
-}) => {
-  const { deactivate, state, toggle } = useBoolean(isActive);
-
-  return (
-    <NavbarItem
-      {...args}
-      isActive={state}
-      onDeactivate={deactivate}
-      onToggle={toggle}
-    />
-  );
-};
+const Template: ComponentStory<typeof NavbarItem> = (args) => (
+  <NavbarItem {...args} />
+);
 
 /**
  * NavbarItem Stories - Default
@@ -37,7 +22,6 @@ Default.args = {
   children: 'The modal contents.',
   icon: 'cog',
   id: 'default',
-  isActive: false,
   label: 'Open example',
 };
 
@@ -49,7 +33,6 @@ ModalVisibleAfterBreakpoint.args = {
   children: 'The modal contents.',
   icon: 'cog',
   id: 'modal-visible',
-  isActive: false,
   label: 'Open example',
   modalVisibleFrom: 'md',
 };