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, 37 insertions, 0 deletions

diff --git a/src/components/organisms/modals/search-modal.tsx b/src/components/organisms/modals/search-modal.tsx
new file mode 100644
index 0000000..ed6084a
--- /dev/null
+++ b/src/components/organisms/modals/search-modal.tsx
@@ -0,0 +1,37 @@
+import Modal, { type ModalProps } from '@components/molecules/modals/modal';
+import { forwardRef, ForwardRefRenderFunction } from 'react';
+import { useIntl } from 'react-intl';
+import SearchForm, { type SearchFormProps } from '../forms/search-form';
+import styles from './search-modal.module.scss';
+
+export type SearchModalProps = SearchFormProps & {
+  /**
+   * Set additional classnames to modal wrapper.
+   */
+  className?: ModalProps['className'];
+};
+
+/**
+ * SearchModal
+ *
+ * Render a search form modal.
+ */
+const SearchModal: ForwardRefRenderFunction<
+  HTMLInputElement,
+  SearchModalProps
+> = ({ className, searchPage }, ref) => {
+  const intl = useIntl();
+  const modalTitle = intl.formatMessage({
+    defaultMessage: 'Search',
+    description: 'SearchModal: modal title',
+    id: 'G+Twgm',
+  });
+
+  return (
+    <Modal title={modalTitle} className={`${styles.wrapper} ${className}`}>
+      <SearchForm hideLabel={true} ref={ref} searchPage={searchPage} />
+    </Modal>
+  );
+};
+
+export default forwardRef(SearchModal);