@c-rex/components 0.3.0-build.35 → 0.3.0-build.38

package/src/breadcrumb.tsx

@@ -1,124 +0,0 @@
-"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>
-    );
-};

package/src/directoryNodes/tree-of-content.tsx

@@ -1,68 +0,0 @@
-import {
-    SidebarGroup,
-    SidebarMenu,
-    SidebarMenuButton,
-    SidebarMenuItem,
-    SidebarMenuSub,
-    SidebarMenuSubButton,
-    SidebarMenuSubItem,
-} from "@c-rex/ui/sidebar";
-import { DirectoryNodeModel, TreeOfContent as TreeOfContentModel } from "@c-rex/interfaces";
-import { generateTreeOfContent } from "@c-rex/utils/directoryNodes";
-import Link from "next/link";
-import { Suspense } from "react";
-import { Skeleton } from "@c-rex/ui/skeleton";
-
-interface SidebarProps {
-    directoryNodes?: DirectoryNodeModel[];
-    tree?: TreeOfContentModel[];
-}
-
-export async function TreeOfContent({ directoryNodes, tree: providedTree }: SidebarProps) {
-    const tree = providedTree ?? (directoryNodes ? await generateTreeOfContent(directoryNodes) : []);
-
-    return (
-        <Suspense
-            fallback={
-                <SidebarGroup className="pt-4">
-                    <Skeleton className="w-auto h-10 mb-2" />
-                    <Skeleton className="w-auto h-10 mb-2" />
-                    <Skeleton className="w-auto h-10 mb-2 ml-8" />
-                    <Skeleton className="w-auto h-10 mb-2 ml-8" />
-                    <Skeleton className="w-auto h-10 mb-2 ml-8" />
-                    <Skeleton className="w-auto h-10 mb-2 ml-8" />
-                    <Skeleton className="w-auto h-10 mb-2" />
-                </SidebarGroup>
-            }
-        >
-            <SidebarMenu>
-                {tree.map((item) => (
-                    <SidebarMenuItem key={item.id}>
-                        <SidebarMenuButton asChild isActive={item.active}>
-                            <Link prefetch={false} href={`/topics/${item.linkId}/pages`} title={item.label}>
-                                {item.label}
-                            </Link>
-                        </SidebarMenuButton>
-
-                        {item.children?.length ? (
-                            <SidebarMenuSub>
-                                {item.children.map((item) => (
-                                    <SidebarMenuSubItem key={item.label}>
-                                        <SidebarMenuSubButton
-                                            asChild
-                                            isActive={item.active}
-                                        >
-                                            <Link prefetch={false} href={`/topics/${item.linkId}/pages`} title={item.label}>
-                                                {item.label}
-                                            </Link>
-                                        </SidebarMenuSubButton>
-                                    </SidebarMenuSubItem>
-                                ))}
-                            </SidebarMenuSub>
-                        ) : null}
-                    </SidebarMenuItem>
-                ))}
-            </SidebarMenu>
-        </Suspense>
-    );
-}

package/src/render-article.tsx

@@ -1,75 +0,0 @@
-"use client";
-
-import { useMemo, useRef, useEffect } from "react";
-import parse from "html-react-parser";
-import { useQueryState } from "nuqs";
-import { useHighlight } from "@c-rex/contexts/highlight-provider";
-import { useHighlightStore } from "./stores/highlight-store";
-import styles from "./render-article.module.css";
-
-type Props = {
-    htmlContent: string;
-    contentLang?: string;
-};
-
-export const RenderArticle = ({ htmlContent, contentLang }: Props) => {
-    const [query] = useQueryState("q");
-    const containerRef = useRef<HTMLElement | null>(null);
-    const enableHighlight = useHighlightStore((state) => state.enable);
-    const { registerContainer } = useHighlight();
-
-    const highlightedContent = useMemo(() => {
-        if (!enableHighlight) return parse(htmlContent);
-        if (!query) return parse(htmlContent);
-
-        const terms = query
-            .split(/[+ ]/)
-            .map((t) => t.trim())
-            .filter(Boolean);
-
-        if (terms.length === 0) return parse(htmlContent);
-
-        const escaped = terms.map((t) =>
-            t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
-        );
-        const regex = new RegExp(`(${escaped.join("|")})`, "gi");
-
-        return parse(htmlContent, {
-            replace: (domNode: any) => {
-                if (domNode.type === "text") {
-                    const parts = domNode.data.split(regex);
-                    if (parts.length === 1) return;
-                    return (
-                        <>
-                            {parts.map((part: any, i: any) =>
-                                regex.test(part) ? (
-                                    <mark key={i} className="bg-yellow-200">
-                                        {part}
-                                    </mark>
-                                ) : (
-                                    part
-                                )
-                            )}
-                        </>
-                    );
-                }
-            },
-        });
-    }, [htmlContent, query, enableHighlight]);
-
-    useEffect(() => {
-        registerContainer(containerRef.current);
-    }, [highlightedContent, registerContainer]);
-
-    return (
-        <main
-            ref={containerRef}
-            id="ids-content"
-            data-content-scope="dita"
-            lang={contentLang}
-            className={`ids-content ids-content--dita-ot ${styles.idsContent}`}
-        >
-            {highlightedContent}
-        </main>
-    );
-};

package/src/restriction-menu/restriction-menu-container.tsx

@@ -1,4 +0,0 @@
-export {
-    TaxonomyRestrictionMenu as RestrictionMenuContainer,
-    type TaxonomyRestrictionMenuProps as RestrictionMenuContainerProps,
-} from "./taxonomy-restriction-menu";

package/src/restriction-menu/restriction-menu.tsx

@@ -1,4 +0,0 @@
-export {
-    RestrictionSelectionMenu as RestrictionMenu,
-    type RestrictionSelectionMenuProps as RestrictionMenuProps,
-} from "./restriction-selection-menu";

package/src/stores/__tests__/favorites-store.test.ts

@@ -1,54 +0,0 @@
-import { useFavoritesStore } from "../favorites-store";
-
-describe("favorites-store", () => {
-    beforeEach(() => {
-        useFavoritesStore.setState({
-            favorites: [],
-            documents: {},
-        });
-    });
-
-    it("adds a document and its first topic without duplicating favorites", () => {
-        const { favoriteDocument, favoriteTopic } = useFavoritesStore.getState();
-
-        favoriteDocument("DOC-1", "Document 1");
-        favoriteTopic("DOC-1", "TOPIC-1", "Topic 1", "red");
-
-        const state = useFavoritesStore.getState();
-
-        expect(state.favorites).toHaveLength(2);
-        expect(state.favorites.map((item) => item.id).sort()).toEqual(["DOC-1", "TOPIC-1"]);
-        expect(state.documents["DOC-1"]).toEqual({
-            label: "Document 1",
-            topics: [{ id: "TOPIC-1", label: "Topic 1", color: "red" }],
-        });
-    });
-
-    it("does not duplicate a document or topic when favorited multiple times", () => {
-        const { favoriteDocument, favoriteTopic } = useFavoritesStore.getState();
-
-        favoriteDocument("DOC-1", "Document 1");
-        favoriteDocument("DOC-1", "Document 1");
-        favoriteTopic("DOC-1", "TOPIC-1", "Topic 1", "red");
-        favoriteTopic("DOC-1", "TOPIC-1", "Topic 1", "red");
-
-        const state = useFavoritesStore.getState();
-
-        expect(state.favorites).toHaveLength(2);
-        expect(state.documents["DOC-1"]?.topics).toHaveLength(1);
-    });
-
-    it("does not duplicate the document marker when a topic is favorited after the document", () => {
-        const { favoriteDocument, favoriteTopic } = useFavoritesStore.getState();
-
-        favoriteDocument("DOC-1", "Document 1");
-        favoriteTopic("DOC-1", "TOPIC-1", "Topic 1", "red");
-        favoriteTopic("DOC-1", "TOPIC-2", "Topic 2", "blue");
-
-        const state = useFavoritesStore.getState();
-        const documentEntries = state.favorites.filter((item) => item.id === "DOC-1");
-
-        expect(documentEntries).toHaveLength(1);
-        expect(state.documents["DOC-1"]?.topics).toHaveLength(2);
-    });
-});

package/src/stores/favorites-store.ts

@@ -1,163 +0,0 @@
-import { Favorite } from "@c-rex/types";
-import { create } from "zustand";
-import { persist } from "zustand/middleware";
-
-type FavoriteDocumentState = { topics: Favorite[], label?: string };
-type FavoriteDocumentsMap = Record<string, FavoriteDocumentState>;
-
-type FavoritesStore = {
-    favorites: Favorite[];
-    documents: FavoriteDocumentsMap;
-    favoriteTopic: (documentId: string, id: string, label: string, color: string) => void;
-    unfavoriteTopic: (documentId: string, id: string) => void;
-    favoriteDocument: (id: string, label: string) => void;
-    unfavoriteDocument: (id: string) => void;
-};
-
-export const useFavoritesStore = create<FavoritesStore>()(
-    persist((set) => ({
-        documents: {},
-        favorites: [],
-        favoriteTopic: (documentId: string, id: string, label: string, color: string) =>
-            set((state) => {
-                const documents = favoriteTopic(state.documents, documentId, id, label, color);
-                const favorites = upsertFavorites(state.favorites, [
-                    { id, label, color },
-                    { id: documentId, label: state.documents[documentId]?.label || "", color: "" },
-                ]);
-
-                if (documents === state.documents && favorites === state.favorites) {
-                    return state;
-                }
-
-                return { documents, favorites };
-            }),
-        unfavoriteTopic: (documentId: string, id: string) =>
-            set((state) => ({
-                documents: unfavoriteTopic(state.documents, documentId, id),
-                favorites: state.favorites.filter((topic) => topic.id !== id),
-            })),
-        favoriteDocument: (id: string, label: string) =>
-            set((state) => {
-                const documents = upsertDocument(state.documents, id, label);
-                const favorites = upsertFavorites(state.favorites, [{ id, label, color: "" }]);
-
-                if (documents === state.documents && favorites === state.favorites) {
-                    return state;
-                }
-
-                return {
-                    documents,
-                    favorites,
-                };
-            }),
-        unfavoriteDocument: (id: string) =>
-            set((state) => {
-                const documentsCopy = { ...state.documents };
-                if (!documentsCopy[id]) {
-                    return state;
-                }
-
-                const favoritesToRemove = documentsCopy[id]?.topics.map(topic => topic.id) || [];
-                const newFavorites = state.favorites.filter(fav => fav.id !== id && !favoritesToRemove.includes(fav.id));
-                delete documentsCopy[id];
-                return { documents: documentsCopy, favorites: newFavorites };
-            }),
-    }), {
-        name: "c-rex-favorites",
-    })
-);
-
-
-const favoriteTopic = (documents: FavoriteDocumentsMap, documentId: string, id: string, label: string, color: string): FavoriteDocumentsMap => {
-    const currentDocument = documents[documentId];
-    const currentTopics = currentDocument?.topics ?? [];
-    if (currentTopics.some((topic) => topic.id === id)) {
-        return documents;
-    }
-
-    return {
-        ...documents,
-        [documentId]: {
-            ...currentDocument,
-            topics: [...currentTopics, { id, label, color }],
-        },
-    };
-};
-
-const unfavoriteTopic = (documents: FavoriteDocumentsMap, documentId: string, id: string): FavoriteDocumentsMap => {
-    const currentDocument = documents[documentId];
-    if (!currentDocument) {
-        return documents;
-    }
-
-    return {
-        ...documents,
-        [documentId]: {
-            ...currentDocument,
-            topics: currentDocument.topics.filter(topic => topic.id !== id),
-        },
-    };
-};
-
-const upsertDocument = (documents: FavoriteDocumentsMap, documentId: string, label: string): FavoriteDocumentsMap => {
-    const currentDocument = documents[documentId];
-
-    if (!currentDocument) {
-        return {
-            ...documents,
-            [documentId]: { topics: [], label },
-        };
-    }
-
-    if (currentDocument.label === label) {
-        return documents;
-    }
-
-    return {
-        ...documents,
-        [documentId]: {
-            ...currentDocument,
-            label,
-        },
-    };
-};
-
-const upsertFavorites = (favorites: Favorite[], entries: Favorite[]): Favorite[] => {
-    let nextFavorites = favorites;
-
-    for (const entry of entries) {
-        nextFavorites = upsertFavorite(nextFavorites, entry);
-    }
-
-    return nextFavorites;
-};
-
-const upsertFavorite = (favorites: Favorite[], entry: Favorite): Favorite[] => {
-    const index = favorites.findIndex((favorite) => favorite.id === entry.id);
-    if (index === -1) {
-        return [...favorites, entry];
-    }
-
-    const current = favorites[index];
-    if (!current) {
-        return [...favorites, entry];
-    }
-
-    const next = {
-        ...current,
-        label: current.label || entry.label,
-        color: current.color || entry.color,
-    };
-
-    if (
-        current.label === next.label &&
-        current.color === next.color
-    ) {
-        return favorites;
-    }
-
-    const copy = [...favorites];
-    copy[index] = next;
-    return copy;
-};