refactor: use storybook and atomic design (#16)

BREAKING CHANGE: rewrite most of the Typescript types, so the content format (the meta in particular) needs to be updated.

1 files changed, 80 insertions, 0 deletions

diff --git a/src/components/organisms/toolbar/search.tsx b/src/components/organisms/toolbar/search.tsx
new file mode 100644
index 0000000..6a8af26
--- /dev/null
+++ b/src/components/organisms/toolbar/search.tsx
@@ -0,0 +1,80 @@
+import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox';
+import MagnifyingGlass from '@components/atoms/icons/magnifying-glass';
+import FlippingLabel from '@components/molecules/forms/flipping-label';
+import useInputAutofocus from '@utils/hooks/use-input-autofocus';
+import { forwardRef, ForwardRefRenderFunction, useRef } from 'react';
+import { useIntl } from 'react-intl';
+import SearchModal, { type SearchModalProps } from '../modals/search-modal';
+import searchStyles from './search.module.scss';
+import sharedStyles from './toolbar-items.module.scss';
+
+export type SearchProps = {
+  /**
+   * Set additional classnames to the modal wrapper.
+   */
+  className?: SearchModalProps['className'];
+  /**
+   * The button state.
+   */
+  isActive: CheckboxProps['value'];
+  /**
+   * A callback function to execute search.
+   */
+  searchPage: SearchModalProps['searchPage'];
+  /**
+   * A callback function to handle button state.
+   */
+  setIsActive: CheckboxProps['setValue'];
+};
+
+const Search: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = (
+  { className = '', isActive, searchPage, setIsActive },
+  ref
+) => {
+  const intl = useIntl();
+  const label = isActive
+    ? intl.formatMessage({
+        defaultMessage: 'Close search',
+        id: 'LDDUNO',
+        description: 'Search: Close label',
+      })
+    : intl.formatMessage({
+        defaultMessage: 'Open search',
+        id: 'Xj+WXB',
+        description: 'Search: Open label',
+      });
+
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  useInputAutofocus({
+    condition: isActive,
+    delay: 360,
+    ref: searchInputRef,
+  });
+
+  return (
+    <div className={`${sharedStyles.item} ${searchStyles.item}`} ref={ref}>
+      <Checkbox
+        id="search-button"
+        name="search-button"
+        value={isActive}
+        setValue={setIsActive}
+        className={`${sharedStyles.checkbox} ${searchStyles.checkbox}`}
+      />
+      <FlippingLabel
+        className={sharedStyles.label}
+        htmlFor="search-button"
+        aria-label={label}
+        isActive={isActive}
+      >
+        <MagnifyingGlass />
+      </FlippingLabel>
+      <SearchModal
+        className={`${sharedStyles.modal} ${searchStyles.modal} ${className}`}
+        ref={searchInputRef}
+        searchPage={searchPage}
+      />
+    </div>
+  );
+};
+
+export default forwardRef(Search);