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

diff --git a/src/utils/hooks/use-query-selector-all.tsx b/src/utils/hooks/use-query-selector-all.tsx
new file mode 100644
index 0000000..6ac8a08
--- /dev/null
+++ b/src/utils/hooks/use-query-selector-all.tsx
@@ -0,0 +1,24 @@
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+
+/**
+ * Use `document.querySelectorAll`.
+ *
+ * @param {string} query - A query.
+ * @returns {NodeListOf<HTMLElementTagNameMap[T]|undefined>} - The node list.
+ */
+const useQuerySelectorAll = <T extends keyof HTMLElementTagNameMap>(
+  query: string
+): NodeListOf<HTMLElementTagNameMap[T]> | undefined => {
+  const [elements, setElements] =
+    useState<NodeListOf<HTMLElementTagNameMap[T]>>();
+  const { asPath } = useRouter();
+
+  useEffect(() => {
+    setElements(document.querySelectorAll(query));
+  }, [asPath, query]);
+
+  return elements;
+};
+
+export default useQuerySelectorAll;