@carlonicora/nextjs-jsonapi 1.67.0 → 1.69.0

package/src/features/how-to/components/containers/HowToCommand.tsx

@@ -0,0 +1,230 @@
+"use client";
+
+import { ArrowRight, LifeBuoyIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  SidebarMenuButton,
+} from "../../../../shadcnui";
+import { Modules } from "../../../../core";
+import { DataListRetriever, useDataListRetriever, useDebounce } from "../../../../hooks";
+import { HowTo } from "../../data/HowTo";
+import { HowToInterface } from "../../data/HowToInterface";
+import { HowToService } from "../../data/HowToService";
+import HowToCommandViewer from "./HowToCommandViewer";
+
+function matchPage(pathname: string, pattern: string): boolean {
+  if (pattern.includes(":")) {
+    const pathSegments = pathname.split("/").filter(Boolean);
+    const patternSegments = pattern.split("/").filter(Boolean);
+    if (pathSegments.length !== patternSegments.length) return false;
+    return patternSegments.every((seg, i) => (seg.startsWith(":") ? true : seg === pathSegments[i]));
+  }
+  return pathname.toLowerCase().includes(pattern.toLowerCase());
+}
+
+type HowToCommandProps = {
+  /** Current pathname for page relevance matching */
+  pathname: string;
+  /** Optional extra command groups to render when not searching */
+  extraGroups?: ReactNode;
+  /** Called when user starts a chat from the viewer */
+  onStartChat?: () => void;
+};
+
+export default function HowToCommand({ pathname, extraGroups, onStartChat }: HowToCommandProps) {
+  const t = useTranslations();
+
+  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+  const [selectedHowTo, setSelectedHowTo] = useState<HowToInterface | null>(null);
+
+  const searchTermRef = useRef<string>("");
+  const [searchTerm, setSearchTerm] = useState<string>("");
+
+  const data: DataListRetriever<HowToInterface> = useDataListRetriever({
+    retriever: (params) => {
+      return HowToService.findMany(params);
+    },
+    retrieverParams: {},
+    module: Modules.HowTo,
+  });
+
+  // Split HowTos into relevant (matching current page) and others
+  const { relevantHowTos, otherHowTos } = useMemo(() => {
+    if (!data.data) return { relevantHowTos: [], otherHowTos: [] };
+
+    const relevant: HowToInterface[] = [];
+    const other: HowToInterface[] = [];
+
+    (data.data as HowToInterface[]).forEach((howTo) => {
+      const pages = HowTo.parsePagesFromString(howTo.pages);
+      const isRelevant = pages.some((page) => page && matchPage(pathname, page));
+      if (isRelevant) {
+        relevant.push(howTo);
+      } else {
+        other.push(howTo);
+      }
+    });
+
+    return { relevantHowTos: relevant, otherHowTos: other };
+  }, [data.data, pathname]);
+
+  const search = useCallback(
+    async (searchedTerm: string) => {
+      if (searchedTerm === searchTermRef.current) return;
+      searchTermRef.current = searchedTerm;
+      await data.search(searchedTerm);
+    },
+    [searchTermRef, data],
+  );
+
+  const updateSearchTerm = useDebounce(search, 500);
+
+  useEffect(() => {
+    updateSearchTerm(searchTerm);
+  }, [updateSearchTerm, searchTerm]);
+
+  // Reset search when dialog closes
+  useEffect(() => {
+    if (!dialogOpen) {
+      setSearchTerm("");
+      searchTermRef.current = "";
+    }
+  }, [dialogOpen]);
+
+  // Keyboard shortcut: Cmd+K or Ctrl+K to toggle dialog
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setDialogOpen((open) => !open);
+      }
+    };
+
+    document.addEventListener("keydown", down);
+    return () => document.removeEventListener("keydown", down);
+  }, []);
+
+  const handleStartChat = () => {
+    setDialogOpen(false);
+    setSelectedHowTo(null);
+    if (onStartChat) onStartChat();
+  };
+
+  return (
+    <>
+      <SidebarMenuButton
+        tooltip={t(`howto.command.trigger`)}
+        onClick={() => setDialogOpen(true)}
+        className="text-muted-foreground"
+      >
+        <LifeBuoyIcon />
+        <span>{t(`howto.command.trigger`)}</span>
+      </SidebarMenuButton>
+
+      {/* Search HowTos Dialog */}
+      <Dialog
+        open={dialogOpen}
+        onOpenChange={(open) => {
+          setDialogOpen(open);
+          if (!open) setSelectedHowTo(null);
+        }}
+        modal={true}
+      >
+        <DialogContent
+          className={`flex flex-col gap-0 overflow-hidden p-0 ${selectedHowTo ? "h-[80vh] max-w-3xl" : "max-w-lg"}`}
+        >
+          <DialogHeader className="sr-only">
+            <DialogTitle>{selectedHowTo ? selectedHowTo.name : t("howto.command.title")}</DialogTitle>
+            <DialogDescription> </DialogDescription>
+          </DialogHeader>
+
+          {selectedHowTo ? (
+            <HowToCommandViewer
+              howTo={selectedHowTo}
+              onBack={() => setSelectedHowTo(null)}
+              onStartChat={handleStartChat}
+            />
+          ) : (
+            <Command
+              shouldFilter={false}
+              className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
+            >
+              <CommandInput
+                onKeyDown={(e) => {
+                  if (e.key === "Escape") {
+                    setSearchTerm("");
+                    searchTermRef.current = "";
+                  }
+                }}
+                onValueChange={setSearchTerm}
+                value={searchTerm}
+                placeholder={t(`howto.search.placeholder`)}
+              />
+              <CommandList className="max-h-[60vh] overflow-y-auto">
+                <CommandEmpty>{t(`howto.command.empty`)}</CommandEmpty>
+
+                {/* App-specific extra groups (support, tours, etc.) */}
+                {!searchTerm && extraGroups}
+
+                {/* Relevant to this page */}
+                {relevantHowTos.length > 0 && (
+                  <CommandGroup heading={t(`howto.command.relevant`)}>
+                    {relevantHowTos.map((howTo: HowToInterface) => (
+                      <CommandItem key={howTo.id} onSelect={() => setSelectedHowTo(howTo)} className="cursor-pointer">
+                        <ArrowRight className="h-4 w-4" />
+                        <span>{howTo.name}</span>
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                )}
+
+                {/* All HowTos / Search Results */}
+                {otherHowTos.length > 0 && (
+                  <CommandGroup heading={searchTerm ? undefined : t(`howto.command.all`)}>
+                    {otherHowTos.map((howTo: HowToInterface) => (
+                      <CommandItem key={howTo.id} onSelect={() => setSelectedHowTo(howTo)} className="cursor-pointer">
+                        <ArrowRight className="h-4 w-4" />
+                        <span>{howTo.name}</span>
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                )}
+              </CommandList>
+
+              {/* Keyboard hints footer */}
+              <div className="text-muted-foreground flex items-center justify-center gap-4 border-t px-3 py-2 text-xs">
+                <span className="flex items-center gap-1">
+                  <kbd className="bg-muted rounded border px-1.5 py-0.5 font-mono text-[10px]">&#9166;</kbd>
+                  {t(`howto.command.keyboard.select`)}
+                </span>
+                <span className="flex items-center gap-1">
+                  <kbd className="bg-muted rounded border px-1.5 py-0.5 font-mono text-[10px]">&#8593;&#8595;</kbd>
+                  {t(`howto.command.keyboard.navigate`)}
+                </span>
+                <span className="flex items-center gap-1">
+                  <kbd className="bg-muted rounded border px-1.5 py-0.5 font-mono text-[10px]">
+                    {t(`howto.keyboard.esc`)}
+                  </kbd>
+                  {t(`howto.command.keyboard.close`)}
+                </span>
+              </div>
+            </Command>
+          )}
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/src/features/how-to/components/containers/HowToCommandViewer.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { ArrowLeft, BookOpen, MessageSquare } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useMemo } from "react";
+
+import { BlockNoteEditorContainer } from "../../../../components";
+import { Button } from "../../../../shadcnui";
+import { HowToInterface } from "../../data/HowToInterface";
+import { calculateReadingTime, extractHeadings } from "../../utils/blocknote";
+
+type HowToCommandViewerProps = {
+  howTo: HowToInterface;
+  onBack: () => void;
+  onStartChat?: () => void;
+};
+
+export default function HowToCommandViewer({ howTo, onBack, onStartChat }: HowToCommandViewerProps) {
+  const t = useTranslations();
+
+  const readingTime = useMemo(() => calculateReadingTime(howTo.description), [howTo.description]);
+  const headings = useMemo(() => extractHeadings(howTo.description), [howTo.description]);
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Header with back button, title, and reading time */}
+      <div className="flex items-center gap-3 border-b px-4 py-3">
+        <Button variant="ghost" size="sm" onClick={onBack} className="h-8 px-2">
+          <ArrowLeft className="h-4 w-4" />
+          <span className="ml-1">{t("howto.command.back")}</span>
+        </Button>
+        <h2 className="flex-1 truncate text-lg font-semibold">{howTo.name}</h2>
+        <div className="text-muted-foreground flex items-center gap-1.5 text-sm">
+          <BookOpen className="h-4 w-4" />
+          <span>{t("howto.reading_time.label", { minutes: readingTime })}</span>
+        </div>
+      </div>
+
+      {/* Two-column body */}
+      <div className="flex min-h-0 flex-1">
+        {/* Left sidebar - table of contents */}
+        {headings.length > 0 && (
+          <div className="w-50 shrink-0 overflow-y-auto border-r p-4">
+            <nav className="space-y-1">
+              {headings.map((heading) => (
+                <a
+                  key={heading.id}
+                  href={`#${heading.id}`}
+                  className="text-muted-foreground hover:text-foreground block truncate text-sm"
+                  style={{ paddingLeft: `${(heading.level - 1) * 0.75}rem` }}
+                >
+                  {heading.text}
+                </a>
+              ))}
+            </nav>
+          </div>
+        )}
+
+        {/* Right content - scrollable */}
+        <div id="howto-viewer-content" className="min-w-0 flex-1 overflow-y-auto p-4">
+          <BlockNoteEditorContainer id={howTo.id} type="howto" initialContent={howTo.description} />
+        </div>
+      </div>
+
+      {/* Full-width footer */}
+      {onStartChat && (
+        <div className="flex items-center justify-end gap-2 border-t px-4 py-3">
+          <Button onClick={onStartChat} variant="default" size="sm">
+            <MessageSquare className="mr-2 h-4 w-4" />
+            {t("howto.command.chat_button")}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/features/how-to/components/containers/HowToContainer.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { RoundPageContainer } from "../../../../components";
+import { Modules } from "../../../../core";
+import { useHowToContext } from "../../contexts/HowToContext";
+import { HowToInterface } from "../../data/HowToInterface";
+import HowToContent from "../details/HowToContent";
+import HowToDetails from "../details/HowToDetails";
+
+type HowToContainerProps = {
+  howTo: HowToInterface;
+};
+
+function HowToContainerInternal({ howTo }: HowToContainerProps) {
+  return (
+    <RoundPageContainer module={Modules.HowTo} details={<HowToDetails />}>
+      <HowToContent />
+    </RoundPageContainer>
+  );
+}
+
+export default function HowToContainer() {
+  const { howTo } = useHowToContext();
+  if (!howTo) return null;
+
+  return <HowToContainerInternal howTo={howTo} />;
+}

package/src/features/how-to/components/containers/HowToListContainer.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { RoundPageContainer } from "../../../../components";
+import { Modules } from "../../../../core";
+import HowToList from "../lists/HowToList";
+
+function HowToListContainerInternal() {
+  return (
+    <RoundPageContainer module={Modules.HowTo} fullWidth>
+      <HowToList fullWidth />
+    </RoundPageContainer>
+  );
+}
+
+export default function HowToListContainer() {
+  return <HowToListContainerInternal />;
+}

package/src/features/how-to/components/details/HowToContent.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { BlockNoteEditorContainer } from "../../../../components";
+import { Card } from "../../../../shadcnui";
+import { useHowToContext } from "../../contexts/HowToContext";
+
+export default function HowToContent() {
+  const { howTo } = useHowToContext();
+  if (!howTo) return null;
+
+  return (
+    <Card className="flex w-full flex-col p-4">
+      <BlockNoteEditorContainer id={howTo.id} type="howto" initialContent={howTo.description} />
+    </Card>
+  );
+}

package/src/features/how-to/components/details/HowToDetails.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { AttributeElement, ContentTitle } from "../../../../components";
+import { Modules } from "../../../../core";
+import { useSharedContext } from "../../../../contexts/SharedContext";
+import { Link } from "../../../../shadcnui";
+import { HowTo } from "../../data/HowTo";
+import { HowToInterface } from "../../data/HowToInterface";
+import { useHowToContext } from "../../contexts/HowToContext";
+
+type HowToDetailsProps = {
+  howTo: HowToInterface;
+};
+
+function HowToDetailsInternal({ howTo }: HowToDetailsProps) {
+  const t = useTranslations();
+  const { title } = useSharedContext();
+  const pagesList = HowTo.parsePagesFromString(howTo.pages);
+
+  return (
+    <div className="flex w-full flex-col gap-y-4">
+      <ContentTitle type={title.type} element={title.element} functions={title.functions} module={Modules.HowTo} />
+
+      {pagesList.length > 0 && (
+        <div className="border-t pt-4">
+          <AttributeElement
+            title={t(`howto.fields.pages.label`)}
+            value={
+              <ul className="flex flex-col gap-y-1">
+                {pagesList.map((page, index) => (
+                  <li key={index}>
+                    <Link href={page} className="text-primary hover:underline">
+                      {page}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            }
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function HowToDetails() {
+  const { howTo } = useHowToContext();
+  if (!howTo) return null;
+
+  return <HowToDetailsInternal howTo={howTo} />;
+}

package/src/features/how-to/components/forms/HowToDeleter.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { CommonDeleter } from "../../../../components";
+import { Modules } from "../../../../core";
+import { usePageUrlGenerator } from "../../../../hooks";
+import { HowToInterface } from "../../data/HowToInterface";
+import { HowToService } from "../../data/HowToService";
+
+type HowToDeleterProps = {
+  howTo: HowToInterface;
+};
+
+function HowToDeleterInternal({ howTo }: HowToDeleterProps) {
+  const t = useTranslations();
+  const generateUrl = usePageUrlGenerator();
+
+  if (!howTo) return null;
+
+  return (
+    <CommonDeleter
+      type={`howtos`}
+      deleteFunction={() => HowToService.delete({ howToId: howTo.id })}
+      redirectTo={generateUrl({ page: Modules.HowTo })}
+    />
+  );
+}
+
+export default function HowToDeleter(props: HowToDeleterProps) {
+  return <HowToDeleterInternal {...props} />;
+}