feat: expand the search functionality in the GoToComicDialog

... to allow for searching for comics not only by the text in their
title/tagline, but also by which items are present in the comic and
whether or not the comic is a guest comic or non-canon.

Closes #15

Author: ilyvion

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added ✨
 
 -   Add the ability to lock comic navigation to an item. Closes [#33](https://github.com/Questionable-Content-Extensions/client/issues/33)
+-   Expand the search functionality in the `GoToComicDialog` to allow for searching for comics not only by the text in their title/tagline, but also by which items are present in the comic and whether or not the comic is a guest comic or non-canon. Closes [#15](https://github.com/Questionable-Content-Extensions/client/issues/15)
 
 ### Changed 🔧
 

src/components/GoToComicDialog/ComicList/ComicFilter/ComicFilter.stories.tsx

@@ -0,0 +1,49 @@
+import { useState } from 'react'
+
+import { Meta, StoryObj } from '@storybook/react'
+
+import { ALL_ITEMS, useMswReady } from '~/mocks'
+
+import ComicFilter, { Filter } from './ComicFilter'
+
+export default {
+    component: ComicFilter,
+} as Meta<typeof ComicFilter>
+
+export const Default: StoryObj<typeof ComicFilter> = {
+    render: (args) => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const mswReady = useMswReady()
+
+        // Then, let's fake the necessary REST calls
+        const { worker, rest } = window.msw
+        worker.use(
+            rest.get(
+                'http://localhost:3000/api/v2/itemdata/',
+                (req, res, ctx) => {
+                    const all = [...ALL_ITEMS]
+                    const name =
+                        'This is a mocked API response and will only be accurate for comic 666'
+                    all.push({
+                        id: -1,
+                        name,
+                        shortName: name,
+                        count: 0,
+                        type: 'storyline',
+                        color: 'ffaabb',
+                    })
+                    return res(ctx.json(all))
+                }
+            )
+        )
+
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [filters, setFilters] = useState<Filter[]>([])
+
+        return mswReady ? (
+            <ComicFilter {...args} filters={filters} setFilters={setFilters} />
+        ) : (
+            <></>
+        )
+    },
+}