@k34a/blog 0.0.3 → 0.0.4

package/dist/components/filter-search-sort.d.ts

@@ -0,0 +1,9 @@
+import { z } from 'zod';
+import { articleQuerySchema } from '../services/search-params';
+type FilterProps = z.infer<typeof articleQuerySchema>;
+interface Props extends FilterProps {
+    availableTags: string[];
+    navigate: (query: string) => void;
+}
+export default function FilterSearchSortArticles(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/filter-search-sort.js

@@ -0,0 +1,200 @@
+"use client";
+import { jsx as t, jsxs as w } from "react/jsx-runtime";
+import { Group as A, TextInput as z, Popover as h, Indicator as T, ActionIcon as F, Stack as k, MultiSelect as I, Button as R } from "@mantine/core";
+import { IconSearch as B, IconFilter as j, IconSelector as x, IconCheck as L } from "@tabler/icons-react";
+import { useRef as y, useEffect as C, useMemo as O, useState as b, useCallback as _ } from "react";
+import "../services/search-params.js";
+function Z(r) {
+  const s = y(r);
+  return C(() => {
+    s.current = r;
+  }), O(() => ((...o) => s.current?.(...o)), []);
+}
+function D(r, s) {
+  const { delay: o, flushOnUnmount: i, leading: f } = { delay: s, flushOnUnmount: !1, leading: !1 }, n = Z(r), c = y(0), u = O(() => {
+    const l = Object.assign(
+      (...d) => {
+        window.clearTimeout(c.current);
+        const g = l._isFirstCall;
+        l._isFirstCall = !1;
+        function a() {
+          window.clearTimeout(c.current), c.current = 0, l._isFirstCall = !0;
+        }
+        if (f && g) {
+          n(...d);
+          const m = () => {
+            a();
+          }, e = () => {
+            c.current !== 0 && (a(), n(...d));
+          }, v = () => {
+            a();
+          };
+          l.flush = e, l.cancel = v, c.current = window.setTimeout(m, o);
+          return;
+        }
+        if (f && !g) {
+          const m = () => {
+            c.current !== 0 && (a(), n(...d));
+          }, e = () => {
+            a();
+          };
+          l.flush = m, l.cancel = e;
+          const v = () => {
+            a();
+          };
+          c.current = window.setTimeout(v, o);
+          return;
+        }
+        const p = () => {
+          c.current !== 0 && (a(), n(...d));
+        }, S = () => {
+          a();
+        };
+        l.flush = p, l.cancel = S, c.current = window.setTimeout(p, o);
+      },
+      {
+        flush: () => {
+        },
+        cancel: () => {
+        },
+        _isFirstCall: !0
+      }
+    );
+    return l;
+  }, [n, o, f]);
+  return C(
+    () => () => {
+      i ? u.flush() : u.cancel();
+    },
+    [u, i]
+  ), u;
+}
+const P = [
+  { value: "latest", label: "Latest" },
+  { value: "oldest", label: "Oldest" },
+  { value: "A-Z", label: "Title A-Z" },
+  { value: "Z-A", label: "Title Z-A" }
+];
+function N(r) {
+  const [s, o] = b(r.search ?? ""), [i, f] = b(
+    r.sortBy ?? "latest"
+  ), [n, c] = b(
+    r.tags ?? []
+  ), [u, l] = b(!1), [d, g] = b(!1), a = D(() => {
+    const e = p();
+    r.navigate(e);
+  }, 300), p = _(() => {
+    const e = new URLSearchParams();
+    return s && e.set("search", s), n.length > 0 && e.set("tags", n.join(",")), i && e.set("sortBy", i), e.set("page", "0"), e.toString();
+  }, [s, n, i]);
+  C(() => {
+    a();
+  }, [n, s, i]);
+  const S = n.length > 0, m = i !== "latest";
+  return /* @__PURE__ */ t("form", { style: { paddingBottom: "20px" }, children: /* @__PURE__ */ w(A, { justify: "space-between", wrap: "nowrap", children: [
+    /* @__PURE__ */ t(
+      z,
+      {
+        placeholder: "Search articles...",
+        value: s,
+        onChange: (e) => o(e.currentTarget.value),
+        leftSection: /* @__PURE__ */ t(B, { size: 16 }),
+        rightSectionWidth: 40,
+        w: "100%",
+        size: "lg"
+      }
+    ),
+    /* @__PURE__ */ w(
+      h,
+      {
+        opened: u,
+        onChange: l,
+        position: "bottom-end",
+        width: 300,
+        trapFocus: !0,
+        children: [
+          /* @__PURE__ */ t(h.Target, { children: /* @__PURE__ */ t(
+            T,
+            {
+              color: "blue",
+              size: 8,
+              offset: 4,
+              disabled: !S,
+              inline: !0,
+              children: /* @__PURE__ */ t(
+                F,
+                {
+                  variant: "light",
+                  onClick: () => l((e) => !e),
+                  size: "lg",
+                  children: /* @__PURE__ */ t(j, { size: 18 })
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ t(h.Dropdown, { children: /* @__PURE__ */ t(k, { gap: "sm", children: /* @__PURE__ */ t(
+            I,
+            {
+              label: "Tags",
+              data: r.availableTags.map((e) => ({
+                value: e,
+                label: e
+              })),
+              value: n,
+              onChange: c,
+              searchable: !0,
+              placeholder: "Select tags"
+            }
+          ) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ w(
+      h,
+      {
+        opened: d,
+        onChange: g,
+        position: "bottom-end",
+        width: 200,
+        trapFocus: !0,
+        children: [
+          /* @__PURE__ */ t(h.Target, { children: /* @__PURE__ */ t(
+            T,
+            {
+              color: "blue",
+              size: 8,
+              offset: 4,
+              disabled: !m,
+              inline: !0,
+              children: /* @__PURE__ */ t(
+                F,
+                {
+                  size: "lg",
+                  variant: "light",
+                  onClick: () => g((e) => !e),
+                  children: /* @__PURE__ */ t(x, { size: 18 })
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ t(h.Dropdown, { children: /* @__PURE__ */ t(k, { children: P.map((e) => /* @__PURE__ */ t(
+            R,
+            {
+              onClick: () => f(
+                e.value
+              ),
+              size: "sm",
+              variant: "subtle",
+              leftSection: i === e.value ? /* @__PURE__ */ t(L, {}) : void 0,
+              children: e.label
+            },
+            e.value
+          )) }) })
+        ]
+      }
+    )
+  ] }) });
+}
+export {
+  N as default
+};

package/dist/main.d.ts

@@ -1,4 +1,5 @@
 import { ArticleService, ArticleDetailsForListing } from './services/articles';
 import { articleQuerySchema } from './services/search-params';
-export { ArticleService, articleQuerySchema };
+import { default as FilterSearchSortArticles } from './components/filter-search-sort';
+export { ArticleService, articleQuerySchema, FilterSearchSortArticles };
 export type { ArticleDetailsForListing };

package/dist/main.js

@@ -1,6 +1,8 @@
-import { ArticleService as c } from "./services/articles.js";
-import { articleQuerySchema as t } from "./services/search-params.js";
+import { ArticleService as t } from "./services/articles.js";
+import { articleQuerySchema as c } from "./services/search-params.js";
+import { default as i } from "./components/filter-search-sort.js";
 export {
-  c as ArticleService,
-  t as articleQuerySchema
+  t as ArticleService,
+  i as FilterSearchSortArticles,
+  c as articleQuerySchema
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@k34a/blog",
   "description": "Create and share articles with your audience.",
   "private": false,
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "exports": {
     ".": {