@c-rex/components 0.1.37 → 0.1.39

package/src/autocomplete.tsx

@@ -1,201 +1,201 @@
-"use client"
-
-import { useCallback, useEffect, useRef, useState } from "react";
-import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@c-rex/ui/input-group";
-import { useTranslations } from "next-intl";
-import { SuggestionQueryParams } from "@c-rex/interfaces";
-import { X } from "lucide-react";
-import { useRouter, useSearchParams } from "next/navigation";
-import { suggestionRequest } from "./generated/create-suggestions-request";
-import { useQueryState } from "nuqs";
-import { useSearchSettingsStore } from "./stores/search-settings-store";
-
-export type AutoCompleteProps = {
-    initialValue?: string;
-    embedded?: boolean;
-    endpoint: string;
-    queryParams?: SuggestionQueryParams
-    onSelectParams?: { key: string, value: string }[];
-    onSelectPath: string
-    inputClass?: string
-    keepParams?: boolean;
-};
-
-export const AutoComplete = ({
-    initialValue = "",
-    embedded = true,
-    keepParams = false,
-    endpoint,
-    queryParams,
-    onSelectParams,
-    onSelectPath = "/",
-    inputClass = "",
-}: AutoCompleteProps) => {
-    const t = useTranslations();
-    const [pkg] = useQueryState("package");
-
-    const containerRef = useRef<HTMLDivElement>(null);
-    const searchParams = useSearchParams();
-    const router = useRouter();
-
-    const [open, setOpen] = useState(false);
-    const [query, setQuery] = useState(initialValue);
-    const [loading, setLoading] = useState(false);
-    const [suggestions, setSuggestions] = useState<string[]>([]);
-
-    const fetchSuggestions = useCallback(async (prefix: string): Promise<string[]> => {
-        const params = { ...queryParams };
-        const contentLang = useSearchSettingsStore.getState().language;
-        const restrictions = searchParams.get("restrict")
-
-        if (restrictions) {
-            if (restrictions.includes("informationSubjects")) {
-
-                const informationSubject = restrictions.split("informationSubjects=")[1]?.split(',') || [];
-                if (informationSubject.length > 0) {
-                    params.scopes = informationSubject.map(subject => `informationSubjects=${subject}`);
-                }
-            }
-        }
-
-        if (contentLang) params.lang = contentLang;
-        if (pkg != null) params.scopes = pkg as unknown as string[];
-
-        const results = await suggestionRequest({ endpoint, prefix, queryParams: params });
-
-        return results.data;
-    }, [endpoint, pkg, queryParams, searchParams]);
-
-    const handleSelect = (value: string) => {
-        setQuery(value);
-        setOpen(false);
-
-        const nextParams = new URLSearchParams(keepParams ? searchParams.toString() : "");
-        nextParams.set("page", "1");
-
-        if (value.length > 0) {
-            nextParams.set("search", value);
-        } else {
-            nextParams.delete("search");
-        };
-
-        onSelectParams?.forEach(param => {
-            nextParams.set(param.key, param.value);
-        });
-
-        router.push(`${onSelectPath}?${nextParams.toString()}`);
-    };
-
-    const clearSearch = () => {
-        setQuery("");
-        setOpen(false);
-        const nextParams = new URLSearchParams(keepParams ? searchParams.toString() : "");
-        nextParams.set("page", "1");
-        nextParams.delete("search");
-        const queryString = nextParams.toString();
-
-        onSelectParams?.forEach(param => {
-            nextParams.set(param.key, param.value);
-        });
-        router.push(queryString ? `${onSelectPath}?${queryString}` : onSelectPath);
-    };
-
-    useEffect(() => setQuery(initialValue), [initialValue]);
-
-    useEffect(() => {
-        const handleClickOutside = (e: MouseEvent) => {
-            if (!containerRef.current?.contains(e.target as Node)) {
-                setOpen(false);
-            }
-        };
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, []);
-
-    useEffect(() => {
-        if (query.length < 2) {
-            setSuggestions([]);
-            return;
-        }
-
-        const debounceFetch = setTimeout(() => {
-            setLoading(true);
-            fetchSuggestions(query)
-                .then(setSuggestions)
-                .catch(() => setSuggestions([]))
-                .finally(() => setLoading(false));
-        }, 300);
-
-        return () => clearTimeout(debounceFetch);
-    }, [query, fetchSuggestions]);
-
-    return (
-        <div className="relative flex-1" ref={containerRef}>
-            <InputGroup variant={embedded ? "embedded" : "default"}>
-                <InputGroupInput
-                    variant={embedded ? "embedded" : undefined}
-                    className={inputClass}
-                    type="text"
-                    placeholder={t("search")}
-                    value={query}
-                    onChange={(e) => {
-                        setQuery(e.target.value);
-                        setOpen(true);
-                    }}
-                    onKeyDown={(e) => {
-                        if (e.key === "Enter") {
-                            e.preventDefault();
-                            handleSelect(query);
-                        }
-                    }}
-                />
-                {query.length > 0 && (
-                    <InputGroupAddon align="inline-end">
-                        <InputGroupButton
-                            size="icon-xs"
-                            variant="ghost"
-                            aria-label="Clear search"
-                            onClick={clearSearch}
-                        >
-                            <X className="size-3" />
-                        </InputGroupButton>
-                    </InputGroupAddon>
-                )}
-            </InputGroup>
-
-            {open && (
-                <ul className="suggestions-list absolute z-10 w-full bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto">
-                    {loading ? (
-                        <li>
-                            <div className="flex items-center justify-center py-4">
-                                <div className="animate-spin rounded-full h-6 w-6 border-2 border-gray-300 border-t-gray-950" />
-                            </div>
-                        </li>
-                    ) : (
-                        <>
-                            {suggestions.length > 0 ? (
-                                <>
-                                    {suggestions.map((option) => (
-                                        <li
-                                            key={option}
-                                            className="px-4 py-2 hover:bg-accent cursor-pointer text-sm"
-                                            onClick={() => {
-                                                //handleSelect(`"${option}"`)
-                                                // TODO: check if the quotes are necessary
-                                                handleSelect(option)
-                                            }}
-                                        >
-                                            {option}
-                                        </li>
-                                    ))}
-                                </>
-                            ) : (
-                                <li className="px-4 py-2">No suggestions.</li>
-                            )}
-                        </>
-                    )}
-                </ul>
-            )}
-        </div >
-    );
-}
+"use client"
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@c-rex/ui/input-group";
+import { useTranslations } from "next-intl";
+import { SuggestionQueryParams } from "@c-rex/interfaces";
+import { X } from "lucide-react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { suggestionRequest } from "./generated/create-suggestions-request";
+import { useQueryState } from "nuqs";
+import { useSearchSettingsStore } from "./stores/search-settings-store";
+
+export type AutoCompleteProps = {
+    initialValue?: string;
+    embedded?: boolean;
+    endpoint: string;
+    queryParams?: SuggestionQueryParams
+    onSelectParams?: { key: string, value: string }[];
+    onSelectPath: string
+    inputClass?: string
+    keepParams?: boolean;
+};
+
+export const AutoComplete = ({
+    initialValue = "",
+    embedded = true,
+    keepParams = false,
+    endpoint,
+    queryParams,
+    onSelectParams,
+    onSelectPath = "/",
+    inputClass = "",
+}: AutoCompleteProps) => {
+    const t = useTranslations();
+    const [pkg] = useQueryState("package");
+
+    const containerRef = useRef<HTMLDivElement>(null);
+    const searchParams = useSearchParams();
+    const router = useRouter();
+
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState(initialValue);
+    const [loading, setLoading] = useState(false);
+    const [suggestions, setSuggestions] = useState<string[]>([]);
+
+    const fetchSuggestions = useCallback(async (prefix: string): Promise<string[]> => {
+        const params = { ...queryParams };
+        const contentLang = useSearchSettingsStore.getState().language;
+        const restrictions = searchParams.get("restrict")
+
+        if (restrictions) {
+            if (restrictions.includes("informationSubjects")) {
+
+                const informationSubject = restrictions.split("informationSubjects=")[1]?.split(',') || [];
+                if (informationSubject.length > 0) {
+                    params.scopes = informationSubject.map(subject => `informationSubjects=${subject}`);
+                }
+            }
+        }
+
+        if (contentLang) params.lang = contentLang;
+        if (pkg != null) params.scopes = pkg as unknown as string[];
+
+        const results = await suggestionRequest({ endpoint, prefix, queryParams: params });
+
+        return results.data;
+    }, [endpoint, pkg, queryParams, searchParams]);
+
+    const handleSelect = (value: string) => {
+        setQuery(value);
+        setOpen(false);
+
+        const nextParams = new URLSearchParams(keepParams ? searchParams.toString() : "");
+        nextParams.set("page", "1");
+
+        if (value.length > 0) {
+            nextParams.set("search", value);
+        } else {
+            nextParams.delete("search");
+        };
+
+        onSelectParams?.forEach(param => {
+            nextParams.set(param.key, param.value);
+        });
+
+        router.push(`${onSelectPath}?${nextParams.toString()}`);
+    };
+
+    const clearSearch = () => {
+        setQuery("");
+        setOpen(false);
+        const nextParams = new URLSearchParams(keepParams ? searchParams.toString() : "");
+        nextParams.set("page", "1");
+        nextParams.delete("search");
+        const queryString = nextParams.toString();
+
+        onSelectParams?.forEach(param => {
+            nextParams.set(param.key, param.value);
+        });
+        router.push(queryString ? `${onSelectPath}?${queryString}` : onSelectPath);
+    };
+
+    useEffect(() => setQuery(initialValue), [initialValue]);
+
+    useEffect(() => {
+        const handleClickOutside = (e: MouseEvent) => {
+            if (!containerRef.current?.contains(e.target as Node)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+
+    useEffect(() => {
+        if (query.length < 2) {
+            setSuggestions([]);
+            return;
+        }
+
+        const debounceFetch = setTimeout(() => {
+            setLoading(true);
+            fetchSuggestions(query)
+                .then(setSuggestions)
+                .catch(() => setSuggestions([]))
+                .finally(() => setLoading(false));
+        }, 300);
+
+        return () => clearTimeout(debounceFetch);
+    }, [query, fetchSuggestions]);
+
+    return (
+        <div className="relative flex-1" ref={containerRef}>
+            <InputGroup variant={embedded ? "embedded" : "default"}>
+                <InputGroupInput
+                    variant={embedded ? "embedded" : undefined}
+                    className={inputClass}
+                    type="text"
+                    placeholder={t("search")}
+                    value={query}
+                    onChange={(e) => {
+                        setQuery(e.target.value);
+                        setOpen(true);
+                    }}
+                    onKeyDown={(e) => {
+                        if (e.key === "Enter") {
+                            e.preventDefault();
+                            handleSelect(query);
+                        }
+                    }}
+                />
+                {query.length > 0 && (
+                    <InputGroupAddon align="inline-end">
+                        <InputGroupButton
+                            size="icon-xs"
+                            variant="ghost"
+                            aria-label="Clear search"
+                            onClick={clearSearch}
+                        >
+                            <X className="size-3" />
+                        </InputGroupButton>
+                    </InputGroupAddon>
+                )}
+            </InputGroup>
+
+            {open && (
+                <ul className="suggestions-list absolute z-10 w-full bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto">
+                    {loading ? (
+                        <li>
+                            <div className="flex items-center justify-center py-4">
+                                <div className="animate-spin rounded-full h-6 w-6 border-2 border-gray-300 border-t-gray-950" />
+                            </div>
+                        </li>
+                    ) : (
+                        <>
+                            {suggestions.length > 0 ? (
+                                <>
+                                    {suggestions.map((option) => (
+                                        <li
+                                            key={option}
+                                            className="px-4 py-2 hover:bg-accent cursor-pointer text-sm"
+                                            onClick={() => {
+                                                //handleSelect(`"${option}"`)
+                                                // TODO: check if the quotes are necessary
+                                                handleSelect(option)
+                                            }}
+                                        >
+                                            {option}
+                                        </li>
+                                    ))}
+                                </>
+                            ) : (
+                                <li className="px-4 py-2">No suggestions.</li>
+                            )}
+                        </>
+                    )}
+                </ul>
+            )}
+        </div >
+    );
+}

package/src/breadcrumb.tsx

@@ -1,124 +1,124 @@
-"use client";
-
-import React, { FC, Fragment, ReactNode } from "react";
-import {
-    Breadcrumb as BreadcrumbComponent,
-    BreadcrumbEllipsis,
-    BreadcrumbItem,
-    BreadcrumbLink,
-    BreadcrumbList,
-    BreadcrumbPage,
-    BreadcrumbSeparator
-} from "@c-rex/ui/breadcrumb";
-import { Button } from "@c-rex/ui/button";
-import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "@c-rex/ui/drawer";
-import { TreeOfContent } from "@c-rex/interfaces";
-import { useTranslations } from 'next-intl';
-import Link from "next/link"
-import { useBreakpoint } from "@c-rex/ui/hooks"
-import { DEVICE_OPTIONS } from "@c-rex/constants";
-import { generateBreadcrumbItems } from "@c-rex/utils";
-
-interface BreadcrumbProps {
-    tree: TreeOfContent[];
-    lang: string;
-}
-
-export const Breadcrumb: FC<BreadcrumbProps> = ({ tree, lang }) => {
-    const t = useTranslations("breadcrumbs");
-    const items = generateBreadcrumbItems(tree);
-    const device = useBreakpoint();
-    const isMobile = device !== null && (device === DEVICE_OPTIONS.MOBILE || device === DEVICE_OPTIONS.TABLET);
-
-    if (!items) return null
-
-    const lastItem = items[items.length - 1] as TreeOfContent;
-
-    const renderDrawer = () => {
-        if (items.length < 2) return null
-
-        return (
-            <>
-                <BreadcrumbItem>
-                    <Drawer>
-                        <DrawerTrigger asChild>
-                            <BreadcrumbEllipsis className="h-4 w-4" />
-                        </DrawerTrigger>
-                        <DrawerContent>
-                            <DrawerHeader className="text-left">
-                                <DrawerTitle>Navigate to</DrawerTitle>
-                                <DrawerDescription>
-                                    Select a page to navigate to.
-                                </DrawerDescription>
-                            </DrawerHeader>
-
-                            <div className="grid gap-1 px-4">
-                                {items.slice(0, -1).map((item) => (
-                                    <Link
-                                        key={item.linkId}
-                                        href={`/topics/${item.linkId}/content`}
-                                        className="py-1 text-sm"
-                                    >
-                                        {item.label}
-                                    </Link>
-                                ))}
-                            </div>
-
-                            <DrawerFooter className="pt-4">
-                                <DrawerClose asChild>
-                                    <Button variant="outline">Close</Button>
-                                </DrawerClose>
-                            </DrawerFooter>
-                        </DrawerContent>
-                    </Drawer>
-                </BreadcrumbItem>
-                <BreadcrumbSeparator />
-            </>
-
-        );
-    };
-
-    const renderLink = (showLink: boolean, item: TreeOfContent): ReactNode => {
-        if (showLink) {
-            return <BreadcrumbLink href={`/topics/${item.linkId}/content`}>{item.label}</BreadcrumbLink>;
-        }
-
-        return <BreadcrumbPage>{item.label}</BreadcrumbPage>;
-    };
-
-    return (
-        <BreadcrumbComponent lang={lang} className="hidden sm:block">
-            <BreadcrumbList>
-                <BreadcrumbItem>
-                    <BreadcrumbLink asChild>
-                        <BreadcrumbLink href="/">{t("home")}</BreadcrumbLink>
-                    </BreadcrumbLink>
-                </BreadcrumbItem>
-                <BreadcrumbSeparator />
-
-                {isMobile ? renderDrawer() : (
-                    <>
-                        {items.slice(0, -1).map((item, index) => {
-                            const isLast = index === items.length - 1;
-
-                            return (
-                                <Fragment key={`${item.label}-fragment`}>
-                                    <BreadcrumbItem key={`${item.label}-item`}>
-                                        {renderLink(!isLast, item)}
-                                    </BreadcrumbItem>
-                                    {!isLast && (
-                                        <BreadcrumbSeparator key={`${item.label}-separator`} />
-                                    )}
-                                </Fragment>
-                            );
-                        })}
-                    </>
-                )}
-
-                <BreadcrumbPage>
-                    {renderLink(false, lastItem)}
-                </BreadcrumbPage>
-            </BreadcrumbList>
-        </BreadcrumbComponent>
-    );
-};
+"use client";
+
+import React, { FC, Fragment, ReactNode } from "react";
+import {
+    Breadcrumb as BreadcrumbComponent,
+    BreadcrumbEllipsis,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbPage,
+    BreadcrumbSeparator
+} from "@c-rex/ui/breadcrumb";
+import { Button } from "@c-rex/ui/button";
+import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "@c-rex/ui/drawer";
+import { TreeOfContent } from "@c-rex/interfaces";
+import { useTranslations } from 'next-intl';
+import Link from "next/link"
+import { useBreakpoint } from "@c-rex/ui/hooks"
+import { DEVICE_OPTIONS } from "@c-rex/constants";
+import { generateBreadcrumbItems } from "@c-rex/utils";
+
+interface BreadcrumbProps {
+    tree: TreeOfContent[];
+    lang: string;
+}
+
+export const Breadcrumb: FC<BreadcrumbProps> = ({ tree, lang }) => {
+    const t = useTranslations("breadcrumbs");
+    const items = generateBreadcrumbItems(tree);
+    const device = useBreakpoint();
+    const isMobile = device !== null && (device === DEVICE_OPTIONS.MOBILE || device === DEVICE_OPTIONS.TABLET);
+
+    if (!items) return null
+
+    const lastItem = items[items.length - 1] as TreeOfContent;
+
+    const renderDrawer = () => {
+        if (items.length < 2) return null
+
+        return (
+            <>
+                <BreadcrumbItem>
+                    <Drawer>
+                        <DrawerTrigger asChild>
+                            <BreadcrumbEllipsis className="h-4 w-4" />
+                        </DrawerTrigger>
+                        <DrawerContent>
+                            <DrawerHeader className="text-left">
+                                <DrawerTitle>Navigate to</DrawerTitle>
+                                <DrawerDescription>
+                                    Select a page to navigate to.
+                                </DrawerDescription>
+                            </DrawerHeader>
+
+                            <div className="grid gap-1 px-4">
+                                {items.slice(0, -1).map((item) => (
+                                    <Link
+                                        key={item.linkId}
+                                        href={`/topics/${item.linkId}/content`}
+                                        className="py-1 text-sm"
+                                    >
+                                        {item.label}
+                                    </Link>
+                                ))}
+                            </div>
+
+                            <DrawerFooter className="pt-4">
+                                <DrawerClose asChild>
+                                    <Button variant="outline">Close</Button>
+                                </DrawerClose>
+                            </DrawerFooter>
+                        </DrawerContent>
+                    </Drawer>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+            </>
+
+        );
+    };
+
+    const renderLink = (showLink: boolean, item: TreeOfContent): ReactNode => {
+        if (showLink) {
+            return <BreadcrumbLink href={`/topics/${item.linkId}/content`}>{item.label}</BreadcrumbLink>;
+        }
+
+        return <BreadcrumbPage>{item.label}</BreadcrumbPage>;
+    };
+
+    return (
+        <BreadcrumbComponent lang={lang} className="hidden sm:block">
+            <BreadcrumbList>
+                <BreadcrumbItem>
+                    <BreadcrumbLink asChild>
+                        <BreadcrumbLink href="/">{t("home")}</BreadcrumbLink>
+                    </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+
+                {isMobile ? renderDrawer() : (
+                    <>
+                        {items.slice(0, -1).map((item, index) => {
+                            const isLast = index === items.length - 1;
+
+                            return (
+                                <Fragment key={`${item.label}-fragment`}>
+                                    <BreadcrumbItem key={`${item.label}-item`}>
+                                        {renderLink(!isLast, item)}
+                                    </BreadcrumbItem>
+                                    {!isLast && (
+                                        <BreadcrumbSeparator key={`${item.label}-separator`} />
+                                    )}
+                                </Fragment>
+                            );
+                        })}
+                    </>
+                )}
+
+                <BreadcrumbPage>
+                    {renderLink(false, lastItem)}
+                </BreadcrumbPage>
+            </BreadcrumbList>
+        </BreadcrumbComponent>
+    );
+};