@carlonicora/nextjs-jsonapi 1.68.0 → 1.70.0

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} />;
+}

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

@@ -0,0 +1,270 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PlusIcon, SearchIcon, XIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { ReactNode, useCallback, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { v4 } from "uuid";
+import { z } from "zod";
+
+import { EditorSheet, FormInput } from "../../../../components";
+import { BlockNoteEditorContainer } from "../../../../components";
+import { ModuleRegistry, Modules } from "../../../../core";
+import { useI18nRouter } from "../../../../hooks";
+import {
+  Button,
+  Command,
+  CommandEmpty,
+  CommandItem,
+  CommandList,
+  Input,
+  Label,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../../../shadcnui";
+import { HowTo } from "../../data/HowTo";
+import { HowToInput, HowToInterface } from "../../data/HowToInterface";
+import { HowToService } from "../../data/HowToService";
+
+function PageSelector({
+  value,
+  allPageUrls,
+  selectedPages,
+  placeholder,
+  emptyMessage,
+  onSelect,
+  onRemove,
+}: {
+  value: string;
+  allPageUrls: { id: string; text: string }[];
+  selectedPages: string[];
+  placeholder: string;
+  emptyMessage: string;
+  onSelect: (value: string) => void;
+  onRemove: () => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+
+  const selectedLabel = value ? allPageUrls.find((opt) => opt.id === value) : undefined;
+
+  const filteredOptions = useMemo(() => {
+    const available = allPageUrls.filter((opt) => opt.id === value || !selectedPages.includes(opt.id));
+    if (!search) return available;
+    const term = search.toLowerCase();
+    return available.filter((opt) => opt.text.toLowerCase().includes(term) || opt.id.toLowerCase().includes(term));
+  }, [allPageUrls, selectedPages, value, search]);
+
+  return (
+    <div className="flex gap-2">
+      <Popover open={open} onOpenChange={setOpen} modal={true}>
+        <PopoverTrigger className="flex-1">
+          <div className="bg-input/20 dark:bg-input/30 border-input flex h-9 w-full items-center rounded-md border px-3 text-sm">
+            {selectedLabel ? (
+              <span>
+                {selectedLabel.text} ({selectedLabel.id})
+              </span>
+            ) : (
+              <span className="text-muted-foreground">{placeholder}</span>
+            )}
+          </div>
+        </PopoverTrigger>
+        <PopoverContent align="start" className="w-(--anchor-width) p-0">
+          <Command shouldFilter={false}>
+            <div className="relative w-full border-b">
+              <SearchIcon className="text-muted-foreground absolute top-2.5 left-2.5 h-4 w-4" />
+              <Input
+                placeholder={placeholder}
+                type="text"
+                className="rounded-none border-0 pl-8 focus-visible:ring-0"
+                onChange={(e) => setSearch(e.target.value)}
+                value={search}
+              />
+            </div>
+            <CommandList className="max-h-48">
+              <CommandEmpty>{emptyMessage}</CommandEmpty>
+              {filteredOptions.map((opt) => (
+                <CommandItem
+                  key={opt.id}
+                  className="cursor-pointer"
+                  onSelect={() => {
+                    onSelect(opt.id);
+                    setOpen(false);
+                    setSearch("");
+                  }}
+                >
+                  {opt.text} ({opt.id})
+                </CommandItem>
+              ))}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+      <Button type="button" variant="outline" size="icon" onClick={onRemove}>
+        <XIcon className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+}
+
+type HowToEditorProps = {
+  howTo?: HowToInterface;
+  propagateChanges?: (howTo: HowToInterface) => void;
+  trigger?: ReactNode;
+  forceShow?: boolean;
+  onClose?: () => void;
+  onRevalidate?: (path: string) => Promise<void>;
+  dialogOpen?: boolean;
+  onDialogOpenChange?: (open: boolean) => void;
+};
+
+function HowToEditorInternal({
+  howTo,
+  propagateChanges,
+  trigger,
+  forceShow,
+  onClose,
+  onRevalidate,
+  dialogOpen,
+  onDialogOpenChange,
+}: HowToEditorProps) {
+  const router = useI18nRouter();
+  const t = useTranslations();
+
+  const formSchema = useMemo(
+    () =>
+      z.object({
+        id: z.string().uuid(),
+        name: z.string().min(1, { message: t(`howto.fields.name.error`) }),
+        description: z.any(),
+        pages: z.array(z.string()),
+      }),
+    [t],
+  );
+
+  const getDefaultValues = useCallback(
+    () => ({
+      id: howTo?.id || v4(),
+      name: howTo?.name || "",
+      description: howTo?.description || [],
+      pages: HowTo.parsePagesFromString(howTo?.pages),
+    }),
+    [howTo],
+  );
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: getDefaultValues(),
+  });
+
+  const handleDescriptionChange = useCallback(
+    (content: any) => {
+      form.setValue("description", content, { shouldDirty: true });
+    },
+    [form],
+  );
+
+  const allPageUrls = useMemo(() => ModuleRegistry.getAllPageUrls(), []);
+  const pages = form.watch("pages");
+
+  const addPage = () => {
+    form.setValue("pages", [...pages, ""], { shouldDirty: true });
+  };
+
+  const removePage = (index: number) => {
+    form.setValue(
+      "pages",
+      pages.filter((_: string, i: number) => i !== index),
+      { shouldDirty: true },
+    );
+  };
+
+  return (
+    <EditorSheet
+      form={form}
+      entityType={t(`entities.howtos`, { count: 1 })}
+      entityName={howTo?.name}
+      isEdit={!!howTo}
+      module={Modules.HowTo}
+      propagateChanges={propagateChanges}
+      size="lg"
+      onSubmit={async (values) => {
+        const payload: HowToInput = {
+          id: values.id,
+          name: values.name,
+          authorId: "",
+          description: values.description,
+          pages: HowTo.serializePagesToString(values.pages),
+        };
+
+        const updatedHowTo = howTo ? await HowToService.update(payload) : await HowToService.create(payload);
+
+        return updatedHowTo;
+      }}
+      onReset={() => {
+        return getDefaultValues();
+      }}
+      onRevalidate={onRevalidate}
+      onNavigate={(url) => router.push(url)}
+      onClose={onClose}
+      trigger={trigger}
+      forceShow={forceShow}
+      dialogOpen={dialogOpen}
+      onDialogOpenChange={onDialogOpenChange}
+    >
+      <div className="flex w-full flex-col gap-y-4">
+        <FormInput
+          form={form}
+          id="name"
+          name={t(`howto.fields.name.label`)}
+          placeholder={t(`howto.fields.name.placeholder`)}
+          isRequired
+        />
+        <div className="space-y-2">
+          <Label>{t(`howto.fields.description.label`)}</Label>
+          <div className="max-h-80 overflow-y-auto rounded-md border">
+            <BlockNoteEditorContainer
+              id={form.getValues("id")}
+              type="howto"
+              initialContent={form.getValues("description")}
+              onChange={handleDescriptionChange}
+              placeholder={t(`howto.fields.description.placeholder`)}
+            />
+          </div>
+        </div>
+        {/* Pages List */}
+        <div className="space-y-2">
+          <Label>{t(`howto.fields.pages.label`)}</Label>
+          <div className="space-y-2">
+            {pages.map((page: string, index: number) => (
+              <PageSelector
+                key={index}
+                value={page}
+                allPageUrls={allPageUrls}
+                selectedPages={pages}
+                placeholder={t(`howto.fields.pages.placeholder`)}
+                emptyMessage={t(`howto.command.empty`)}
+                onSelect={(value) => {
+                  const updated = [...pages];
+                  updated[index] = value;
+                  form.setValue("pages", updated, { shouldDirty: true });
+                }}
+                onRemove={() => removePage(index)}
+              />
+            ))}
+            <Button type="button" variant="outline" size="sm" onClick={addPage}>
+              <PlusIcon className="mr-2 h-4 w-4" />
+              {t(`howto.fields.pages.add`)}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </EditorSheet>
+  );
+}
+
+export default function HowToEditor(props: HowToEditorProps) {
+  return <HowToEditorInternal {...props} />;
+}

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

@@ -0,0 +1,152 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useWatch } from "react-hook-form";
+
+import { FormFieldWrapper, MultipleSelector, Option } from "../../../../components";
+import { Modules } from "../../../../core";
+import { DataListRetriever, useDataListRetriever, useDebounce } from "../../../../hooks";
+import { HowToInterface } from "../../data/HowToInterface";
+import { HowToService } from "../../data/HowToService";
+
+type HowToMultiSelectType = {
+  id: string;
+  name: string;
+};
+
+type HowToMultiSelectorProps = {
+  id: string;
+  form: any;
+  currentHowTo?: HowToInterface;
+  label?: string;
+  placeholder?: string;
+  onChange?: (howTos?: HowToInterface[]) => void;
+  maxCount?: number;
+  isRequired?: boolean;
+};
+
+type HowToOption = Option & {
+  howToData?: HowToInterface;
+};
+
+export default function HowToMultiSelector({
+  id,
+  form,
+  currentHowTo,
+  label,
+  placeholder,
+  onChange,
+  maxCount = 3,
+  isRequired = false,
+}: HowToMultiSelectorProps) {
+  const t = useTranslations();
+  const [howToOptions, setHowToOptions] = useState<HowToOption[]>([]);
+  const [searchTerm, setSearchTerm] = useState<string>("");
+
+  const selectedHowTos: HowToMultiSelectType[] = useWatch({ control: form.control, name: id }) || [];
+
+  const data: DataListRetriever<HowToInterface> = useDataListRetriever({
+    retriever: (params) => HowToService.findMany(params),
+    retrieverParams: {},
+    ready: true,
+    module: Modules.HowTo,
+  });
+
+  const updateSearch = useCallback(
+    (searchedTerm: string) => {
+      if (searchedTerm.trim()) {
+        data.addAdditionalParameter("search", searchedTerm.trim());
+      } else {
+        data.removeAdditionalParameter("search");
+      }
+    },
+    [data],
+  );
+
+  const debouncedUpdateSearch = useDebounce(updateSearch, 500);
+
+  useEffect(() => {
+    debouncedUpdateSearch(searchTerm);
+  }, [debouncedUpdateSearch, searchTerm]);
+
+  useEffect(() => {
+    if (data.data && data.data.length > 0) {
+      const howTos = data.data as HowToInterface[];
+      const filteredHowTos = howTos.filter((howTo) => howTo.id !== currentHowTo?.id);
+
+      const options: HowToOption[] = filteredHowTos.map((howTo) => ({
+        label: howTo.name,
+        value: howTo.id,
+        howToData: howTo,
+      }));
+
+      // Add options for any already selected that aren't in search results
+      const existingOptionIds = new Set(options.map((option) => option.value));
+      const missingOptions: HowToOption[] = selectedHowTos
+        .filter((howTo) => !existingOptionIds.has(howTo.id))
+        .map((howTo) => ({
+          label: howTo.name,
+          value: howTo.id,
+          howToData: howTo as unknown as HowToInterface,
+        }));
+
+      setHowToOptions([...options, ...missingOptions]);
+    }
+  }, [data.data, currentHowTo, selectedHowTos]);
+
+  // Convert selected to Option[] format
+  const selectedOptions = useMemo(() => {
+    return selectedHowTos.map((howTo) => ({
+      value: howTo.id,
+      label: howTo.name,
+    }));
+  }, [selectedHowTos]);
+
+  const handleChange = (options: Option[]) => {
+    // Convert to form format
+    const formValues = options.map((option) => ({
+      id: option.value,
+      name: option.label,
+    }));
+
+    form.setValue(id, formValues, { shouldDirty: true, shouldTouch: true });
+
+    if (onChange) {
+      // Get full data for onChange callback
+      const fullData = options
+        .map((option) => {
+          const howToOption = howToOptions.find((opt) => opt.value === option.value);
+          return howToOption?.howToData;
+        })
+        .filter(Boolean) as HowToInterface[];
+      onChange(fullData);
+    }
+  };
+
+  // Search handler
+  const handleSearchSync = (search: string): Option[] => {
+    setSearchTerm(search);
+    return howToOptions;
+  };
+
+  return (
+    <div className="flex w-full flex-col">
+      <FormFieldWrapper form={form} name={id} label={label} isRequired={isRequired}>
+        {() => (
+          <MultipleSelector
+            value={selectedOptions}
+            onChange={handleChange}
+            options={howToOptions}
+            placeholder={placeholder}
+            maxDisplayCount={maxCount}
+            hideClearAllButton
+            onSearchSync={handleSearchSync}
+            delay={0}
+            emptyIndicator={<span className="text-muted-foreground">{t("ui.search.no_results_generic")}</span>}
+          />
+        )}
+      </FormFieldWrapper>
+    </div>
+  );
+}

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

@@ -0,0 +1,164 @@
+"use client";
+
+import { CircleX, RefreshCwIcon, SearchIcon, XIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import {
+  Command,
+  CommandItem,
+  CommandList,
+  Input,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../../../shadcnui";
+import { FormFieldWrapper } from "../../../../components";
+import { Modules } from "../../../../core";
+import { DataListRetriever, useDataListRetriever, useDebounce } from "../../../../hooks";
+import { HowToInterface } from "../../data/HowToInterface";
+import { HowToService } from "../../data/HowToService";
+
+type HowToSelectorProps = {
+  id: string;
+  form: any;
+  label?: string;
+  placeholder?: string;
+  onChange?: (howTo?: HowToInterface) => void;
+  isRequired?: boolean;
+};
+
+export default function HowToSelector({
+  id,
+  form,
+  label,
+  placeholder,
+  onChange,
+  isRequired = false,
+}: HowToSelectorProps) {
+  const t = useTranslations();
+
+  const [open, setOpen] = useState<boolean>(false);
+
+  const searchTermRef = useRef<string>("");
+  const [searchTerm, setSearchTerm] = useState<string>("");
+
+  const [isSearching, setIsSearching] = useState<boolean>(false);
+
+  const data: DataListRetriever<HowToInterface> = useDataListRetriever({
+    retriever: (params) => {
+      return HowToService.findMany(params);
+    },
+    retrieverParams: {},
+    module: Modules.HowTo,
+  });
+
+  const search = useCallback(
+    async (searchedTerm: string) => {
+      try {
+        if (searchedTerm === searchTermRef.current) return;
+        setIsSearching(true);
+        searchTermRef.current = searchedTerm;
+        await data.search(searchedTerm);
+      } finally {
+        setIsSearching(false);
+      }
+    },
+    [searchTermRef, data],
+  );
+
+  const updateSearchTerm = useDebounce(search, 500);
+
+  useEffect(() => {
+    setIsSearching(true);
+    updateSearchTerm(searchTerm);
+  }, [updateSearchTerm, searchTerm]);
+
+  const setHowTo = (howTo?: HowToInterface) => {
+    if (onChange) onChange(howTo);
+    if (!howTo) {
+      form.setValue(id, undefined, { shouldDirty: true });
+      setOpen(false);
+      return;
+    }
+
+    form.setValue(id, { id: howTo.id, name: howTo.name }, { shouldDirty: true });
+    setOpen(false);
+
+    setTimeout(() => {
+      setOpen(false);
+    }, 0);
+  };
+
+  return (
+    <div className="flex w-full flex-col">
+      <FormFieldWrapper form={form} name={id} label={label} isRequired={isRequired}>
+        {(field: any) => (
+          <Popover open={open} onOpenChange={setOpen} modal={true}>
+            <div className="flex w-full flex-row items-center justify-between">
+              <PopoverTrigger className="w-full">
+                <div className="flex w-full flex-row items-center justify-start rounded-md">
+                  {field.value ? (
+                    <div className="bg-input/20 dark:bg-input/30 border-input flex h-7 w-full flex-row items-center justify-start rounded-md border px-2 py-0.5 text-sm md:text-xs/relaxed">
+                      <span>{field.value?.name ?? ""}</span>
+                    </div>
+                  ) : (
+                    <div className="bg-input/20 dark:bg-input/30 border-input text-muted-foreground flex h-7 w-full flex-row items-center justify-start rounded-md border px-2 py-0.5 text-sm md:text-xs/relaxed">
+                      {placeholder ?? t(`generic.search.placeholder`, { type: t(`entities.howtos`, { count: 1 }) })}
+                    </div>
+                  )}
+                </div>
+              </PopoverTrigger>
+              {field.value && (
+                <CircleX
+                  className="text-muted hover:text-destructive ml-2 h-4 w-4 shrink-0 cursor-pointer"
+                  onClick={() => setHowTo()}
+                />
+              )}
+            </div>
+            <PopoverContent align="start" className="w-(--anchor-width)">
+              <Command shouldFilter={false}>
+                <div className="relative mb-2 w-full">
+                  <SearchIcon className="text-muted-foreground absolute top-2.5 left-2.5 h-4 w-4" />
+                  <Input
+                    placeholder={t(`generic.search.placeholder`, { type: t(`entities.howtos`, { count: 1 }) })}
+                    type="text"
+                    className="w-full pr-8 pl-8"
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}
+                    value={searchTerm}
+                  />
+                  {isSearching ? (
+                    <RefreshCwIcon className="text-muted-foreground absolute top-2.5 right-2.5 h-4 w-4 animate-spin" />
+                  ) : searchTermRef.current ? (
+                    <XIcon
+                      className={`absolute top-2.5 right-2.5 h-4 w-4 ${searchTermRef.current ? "cursor-pointer" : "text-muted-foreground"}`}
+                      onClick={() => {
+                        setSearchTerm("");
+                        search("");
+                      }}
+                    />
+                  ) : (
+                    <></>
+                  )}
+                </div>
+                <CommandList>
+                  {data.data &&
+                    data.data.length > 0 &&
+                    (data.data as HowToInterface[]).map((howTo: HowToInterface) => (
+                      <CommandItem
+                        className="cursor-pointer hover:bg-muted data-selected:hover:bg-muted bg-transparent data-selected:bg-transparent"
+                        key={howTo.id}
+                        onSelect={() => setHowTo(howTo)}
+                      >
+                        {howTo.name}
+                      </CommandItem>
+                    ))}
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        )}
+      </FormFieldWrapper>
+    </div>
+  );
+}

package/src/features/how-to/components/index.ts

@@ -0,0 +1,11 @@
+export { default as HowToCommand } from "./containers/HowToCommand";
+export { default as HowToCommandViewer } from "./containers/HowToCommandViewer";
+export { default as HowToContainer } from "./containers/HowToContainer";
+export { default as HowToListContainer } from "./containers/HowToListContainer";
+export { default as HowToContent } from "./details/HowToContent";
+export { default as HowToDetails } from "./details/HowToDetails";
+export { default as HowToDeleter } from "./forms/HowToDeleter";
+export { default as HowToEditor } from "./forms/HowToEditor";
+export { default as HowToMultiSelector } from "./forms/HowToMultiSelector";
+export { default as HowToSelector } from "./forms/HowToSelector";
+export { default as HowToList } from "./lists/HowToList";